`
ice-cream
  • 浏览: 329381 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

jquery学习之—构建功能型表单(一)

阅读更多

比较常见的表单验证功能

 

当在网站中使用jQuery时,我们必须时常提醒自己如果用户禁用了JavaScript,那么页面看起来会怎样、功能是否还健全(当然,除非我们知道用户是谁,而且知道他们会怎样配置浏览器)。但是,这并不意味着我们不能为JavaScript的用户创建更美观或者功能更强大的网站。渐进增强 的原则在JavaScript开发者中间如此流行,就是因为它在为多数人提供额外功能的同时,还能照顾到全体用户的需求。

 

效果图如下:

 

如果我上面这个示例用户禁用了js,效果图如下:

此时内容结构还是一样的清晰明了。

 

下面来看一下过程:

<fieldset>
<legend>Personal Info</legend>
<form action="">
	<ol>
		<li>
			<label for="first-name">First Name</label>
			<input class="required" type="text" name="first-name" id="first-name"/>
			<span>(required)</span>
		</li>
		<li>
			<label for="last-name">Last Name</label>
			<input class="required" type="text" name="last-name" id="last-name"/>
			<span>(required)</span>
		</li>
		<li>
			How would you like to be contacted?(choose at least one method)
			<ul>
				<li>
					<label for="by-email"><input type="checkbox" name="by-contact-type" value="E-mail" id="by-email"/>by E-mail</label>
					<input class="contional" type="text" name="email" id="email" />
					<span>(required when corresponding checkbox checked)</span>				
				</li>
				<li>
					<label for="by-phone"><input type="checkbox" name="by-contact-type" value="phone" id="by-phone"/>by Phone</label>
					<input class="contional" type="text" name="phone" id="phone" />
					<span>(required when corresponding checkbox checked)</span>				
				</li>	
				<li>
					<label for="by-fax"><input type="checkbox" name="by-contact-type" value="fax" id="by-fax"/>by Fax</label>
					<input class="contional" type="text" name="fax" id="fax" />
					<span>(required when corresponding checkbox checked)</span>				
				</li>	
			</ul>		
		</li>
	</ol>
	<input type="submit" value="send" id="send"/>
</form>
</fieldset>

 1.通常表单会用fieldset来构建。

fieldset:用于对表单中的元素进行分组并在文档中区别标出文本。它与窗口框架的行为有些相似。

legend: 在 fieldset 对象绘制的方框内插入一个标题。

由于legend的样式兼容性很差(这里我就不讲是怎么兼容的了),我们就用js把legend标签替换成h3标题标签


var heading = $("legend","fieldset").remove().text();
$("<h3></h3>").text(heading).prependTo("fieldset");


2.在这个联系表单中,必填字段都带有class=”require“以便应用样式和响应用户的输入;而每种联系方式的输入都带有class="conditional"。


首先清理必填字段的提示信息


var requiredFlag = "*";
var requiredKey = $("input.required:first").next("span").text();
requiredKey = requiredFlag + requiredKey.replace(/^\((.+)\)$/,"$1");
var conditionalFlag = "**";
var contionalKey = $("input.contional:first").next("span").text();
contionalKey = conditionalFlag + contionalKey.replace(/^\((.+)\)$/,"$1");
$("<p></p>").addClass("field-key").append(requiredKey + "<br />").append(contionalKey).insertBefore("fieldset:first");
$(":input").filter(".required").next("span").text(requiredFlag).end().prev("label").addClass("req-label");
$(":input").filter(".contional").next("span").text(conditionalFlag);

设置两个标记变量requiredFlag和conditionalFlag,向每个必填的span中分别填入这两个变量。再把提示信息保存到另外两个变量requiredKey和contionalKey中,并且将每个标记与相应的信息(去掉了原括号)连接起来。


这里用了正则表达式以及replace方法。

.replace(/^\((.+)\)$/,"$1");

^:表示后面跟着的应该是字符串的开始位置。

\(\):原括号,\用于转义。

(.+):查找一个或多个同一行的任意字符。

$:字符串的结束位置。

$1:代表的是位于圆括号内部但不包含圆括号的所有字符。


由于必填是一个*号,可能不会立即吸引用户的注意力,所以还需要为每个必填字段的<label>添加class=“req-label”,让每个必填字段的<label>变成粗体


创建一个新的段落,把requiredKey和contionalKey添加到这个段落中,再将这个段落插入到联系表单的前面。


3.我们再围绕询问用户愿意使用哪种联系方式来进一步增强这组字段。因为只有当用户选择了相应的复选框之后,才需要填写后面的文字输入字段,所以可以在文档加载完成后首先隐藏他们。


$("input.contional").each(function(){
	var $thisInput = $(this);
	var $thisFlag = $thisInput.next("span").hide();
	$thisInput.prev("label").find(":checkbox").click(function(){
		if(this.checked){
			$thisInput.show().addClass("required");
			$thisFlag.show();
			$(this).parent("label").addClass("req-label");	
		}
		else{
			$thisInput.hide().removeClass("required").blur();
			$thisFlag.hide();
			$(this).parent("label").removeClass("req-label");
		}
        });	
});

当用户单击复选框时,需要检查复选框是否被选中;如果是,则显示文字输入字段,显示提示标记,然后再为对应的label添加加粗的样式。否则,隐藏条件元素并移除加粗样式。


4.表单验证

在通过jQuery向表单添加验证功能之前,必须记住一条重要的规则:客户端验证不能取代服务器端验证。同样,也不能依赖用户启用javascript。使用jQuery的客户端表单验证具有服务器端无法比拟的一个优势--即时反馈 。服务器端代码,无论是ASP、PHP,还是其他的什么,都需要重载页面才能生效。通过jQuery,可以在必填字段失去焦点(blur)或者用户按下某个键盘按键时,利用灵活的客户端代码实现验证功能

必填的验证

$("input").blur(function(){
	$(this).parent("li").removeClass("warning").find("span.errorMessage").remove();
	if($(this).is(".required")){
		var $listItem = $(this).parent("li");
		if(this.value == ""){
			var errorMessage = "This is a required field";
			if($(this).is(".contional")){
			      errorMessage += ", when its related checkbox is checked";	
		        };
		        $("<span></span>").addClass("errorMessage").text(errorMessage).appendTo($listItem);
		        $listItem.addClass("warning");
		        return;
	         }
        }
});

 格式的验证

      if($(this).is("#email")){
	       var $listItem = $(this).parent("li");
	       if(this.value != " " && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)){
	              var errorMessage = "Please use proper e-mail format (e.g.joe@example.com)";
	       }
	       $("<span></span>").addClass("errorMessage").text(errorMessage).appendTo($listItem);
	       $listItem.addClass("warning");
	}
	if($(this).is("#phone")){
		var $listItem = $(this).parent("li");
		if(this.value != " " && !/86\-1[0-9]{10}$/.test(this.value)){
			var errorMessage = "Please use proper phone format (86-13912312312)";
		}
		$("<span></span>").addClass("errorMessage").text(errorMessage).appendTo($listItem);
		$listItem.addClass("warning");
	}
	if($(this).is("#fax")){
		var $listItem = $(this).parent("li");
		if(this.value != " " && !/0086\-[0-9]{3,4}\-[0-9]{8}$/.test(this.value)){
			var errorMessage = "Please use proper phone format (0086-021-68869163)";
		}
		$("<span></span>").addClass("errorMessage").text(errorMessage).appendTo($listItem);
		$listItem.addClass("warning");
	}

最终检查

实际上,我们有必要在用户提交表单时再检查一遍表单中的字段,这次是整体性的检查。通过表单上的.submit()时间处理程序,可以在所有必填字段上触发blur事件

$("form:first").submit(function(){
	$("#submit-message").remove();
	$("input.required").trigger("blur");
	var numWarnings = $(".warning",this).length;
	if(numWarnings){
		var fieldList = [];
		$(".warning label").each(function(){
			fieldList.push($(this).text());
		});
		$("<div></div>").attr({"id":"submit-message","class":"warning"}).append("Please correct errors with "+numWarnings+" fields:<br />").append("• " + fieldList.join("<br /> • ")).insertBefore("#send");
		return false;
	}
});

 


  • 大小: 68.8 KB
  • 大小: 56.2 KB
分享到:
评论
29 楼 liuchaoyong 2009-07-14  
je的验证做的就不错,能不能讲下
28 楼 shgen 2009-07-08  
不错,学习下,对CHECKALL做了一些改进。
就是不要用each:

     function checkall() {      

            var heading = $("legend").remove().text()+'abc';
$("<h3></h3>").text(heading).prependTo("fieldset:last");

$("<li></li>").html("<label for='discover-all'><input type='checkbox' id='discover-all2'/><em>Check all</em></label>").prependTo("li.discover > ul");

            $('<span id=checkfx>反选</span>').appendTo($('#discover-all2').parent());

$("#discover-all2").click(function(){
var $checkboxes = $(this).parents("ul").find(":checkbox");
if(this.checked){
$(this).next().text("un-check all");
$checkboxes.attr("checked","true");
}
else{
$(this).next().text("check all");
$checkboxes.attr("checked","");
}
}).parent("label").css({"border-bottom":"1px solid #ccc","color":"#777","line-height":"2"});

            //$('<span id=checkfx>反选33</span>').appendTo($('#discover-all2').parent());

           
              $('#checkfx').click(function() {
                         
                           $("fieldset:last input[type='checkbox']").not( $("#discover-all2")[0] ).each(function(){ 
                                  if($(this).attr("checked")){ 
                                     $(this).attr("checked",false); 
                                   }else{ 
                                        $(this).attr("checked",true); 
                                    } 
                           }); 
                         
                      } 

                );

    }
27 楼 songjingjing520 2009-06-18  
I LOVE ice-cream
26 楼 ice-cream 2009-02-25  
FS_LP 写道
我想实现这种表单验证怎么办:
当选择下拉菜单的某个选项之后,会显示与其对应的多个必填选项?
这种该如何实现?

问题描述的不够清楚,没有看明白
25 楼 FS_LP 2009-02-25  
我想实现这种表单验证怎么办:
当选择下拉菜单的某个选项之后,会显示与其对应的多个必填选项?
这种该如何实现?
24 楼 alexwan 2009-01-09  
简单的东西可以这么做,要表现好的效果的话就完全没有必要
23 楼 曾经地迷茫 2009-01-08  
javaTo 写道

jltest 写道
哈哈,我开发的时候根本不会想这个禁用的问题。。 太多地方用到验证了。。。禁用根本别想提交。。。 提交从来不用submit,就一简单button,button里面做事件,想绕过基础验证,没门 但是不能因为浏览器禁用了脚本,页面就一塌糊涂了,所以页面布局是需要保证的。 PS:这类贴能在je评良好,那是相当的……啊,gentleman对mm真实慷慨&nbsp;


想绕过页面验证很简单的,我是指客户端验证,我想应该是你说的基础验证,如果说错,请不要生气。

禁用JS暂且不谈,用户可以查看源文件,获取你form表单的action信息,然后可以直接去访问你那个action,可以通过get方式在URL后面加参数的。

我觉的项目里服务器端验证是必不可少的,客户端验证作用更体现在能有效防止用户的误输入。
22 楼 zouzou 2009-01-07  
用过jQuery,感觉真是不赖
基本上没有考虑过禁用这个问题,呵呵
21 楼 qingjian 2009-01-03  
技术mm 还真是少了
20 楼 弋孤秋 2008-12-29  
很好,学习了
19 楼 jinwenhong 2008-12-29  
jquery这是Ext中新有的吗?
18 楼 ice-cream 2008-12-26  
hxr010 写道

哪有jquery的视频学习教程吗?我也想学,不过看起来不容易啊,上面的我都看的不大懂,但是我也是搞java开发的,

我也不知道有没有视频学习教程,我都是看书的或者在网站搜搜,看看jquery的Api这样学的
17 楼 hxr010 2008-12-26  
哪有jquery的视频学习教程吗?我也想学,不过看起来不容易啊,上面的我都看的不大懂,但是我也是搞java开发的,
16 楼 believe 2008-12-24  
好帖 学习了很多
15 楼 sphinx215 2008-12-21  
学习Jquery中......技术妹妹我喜欢!^_^
14 楼 dwwind 2008-12-19  
很细心。
基本没有考虑过禁用js,后台验证还是少不了的。(submit时验证)
13 楼 snail_zhubin 2008-12-17  
好帖,学习in
12 楼 piaoye83 2008-12-15  
jquery 努力学习中
11 楼 ttxiangyou 2008-12-15  
love plmm
10 楼 javaTo 2008-12-15  
jltest 写道
哈哈,我开发的时候根本不会想这个禁用的问题。。
太多地方用到验证了。。。禁用根本别想提交。。。


提交从来不用submit,就一简单button,button里面做事件,想绕过基础验证,没门

但是不能因为浏览器禁用了脚本,页面就一塌糊涂了,所以页面布局是需要保证的。


PS:这类贴能在je评良好,那是相当的……啊,gentleman对mm真实慷慨 

相关推荐

    jQuery 表单验证插件

    对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)脚本控制。目前支持5种大的校验方式,分别是:inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、...

    功能强大的jquery表单特效

    在IT行业中,jQuery是一个广泛使用...综上所述,"功能强大的jquery表单特效"涵盖了jQuery在表单交互、数据展示和用户体验优化方面的广泛应用,通过学习和实践这些技术,开发者可以创建出更加动态、易于使用的Web应用。

    jQuery分步骤用户注册表单代码

    jQuery作为一种强大的JavaScript库,能够简化网页动态交互和DOM操作,是实现分步骤用户注册表单的理想工具。本文将深入探讨如何利用jQuery实现这种功能,以及相关文件结构的作用。 首先,我们来看"jQuery分步骤用户...

    完美的jQuery拖拽式表单设计器.rar

    **jQuery拖拽式表单设计器——Formbuild** Formbuild是一款基于jQuery技术...在“强大的jQuery拖拽式表单设计器特效”这个文件中,我们可以深入研究和学习Formbuild的各种特效和实现方式,进一步优化我们的表单设计。

    jQuery表单步骤流程导航.zip

    "jQuery表单步骤流程导航"是一个基于jQuery实现的实用工具,主要用于创建多步骤表单,引导用户逐步完成信息填写并提交。这种功能在网页应用中常见于复杂的注册过程、问卷调查或购物结算等场景。 该资源包含的核心...

    jQuery实现表单步骤流程导航特效源码.zip

    通过这个压缩包,我们可以学习如何使用jQuery来构建一个引导用户逐步完成复杂表单填写的交互式界面。 首先,让我们了解表单步骤流程导航的基本概念。在大型或复杂的在线表单中,为了提高用户体验,通常会将表单拆分...

    jquery+ajax实现的表单分页,页面复杂表单数据的加载

    "jQuery+Ajax实现的表单分页,页面复杂表单数据的加载"是一种高效且用户友好的解决方案,能够提高网页性能,优化用户体验。本知识点主要围绕jQuery、Ajax、分页以及复杂表单的数据加载进行深入探讨。 首先,jQuery...

    基于jquery实现的表单向导示例,很精美哦

    在网页设计和开发中,表单向导是一种增强用户体验、引导用户逐步完成复杂表单填写的工具。本示例是基于jQuery库实现的,jQuery是一个...通过学习和实践这个示例,开发者可以提升自己在构建动态、交互性表单方面的技能。

    jQuery EasyValidator插件 表单验证

    jQuery EasyValidator是一款强大的JavaScript表单验证插件,它基于jQuery库构建,专为简化和增强网页表单数据验证而设计。这款插件提供了一系列灵活且易于使用的API,帮助开发者快速实现对用户输入的有效性检查,...

    Jquery学习文档.doc

    5. **插件系统**:jQuery 社区提供了大量插件,涵盖了表单验证、图像轮播、图表绘制等各个领域,大大扩展了其功能。 **三、jQuery 学习路径** 学习 jQuery,首先需要熟悉 JavaScript 的基础知识,包括变量、数据...

    jQuery基础教程

    随后3章从理论到实践,通过表格操作、构建功能型表单、实现滑移和翻转效果等实例,深入浅出地讲解了如何创造性地运用jQuery提供的丰富而强大的API。《jQuery基础教程(第2版)》最后两章专门介绍了如何使用和编写...

    jquery1.51

    对于进阶开发者,可以研究源码,了解其内部工作原理,以及如何利用jQuery构建高效的应用。 总结,jQuery 1.5.1作为一款经典版本,其强大的功能和易用性使其在Web开发中占有重要地位。理解并掌握这一版本,将有助于...

    PHP+Mysql+JQuery按照步骤找回密码表单代码

    这三者结合,可以构建出一个既高效又用户体验良好的动态网站应用。 首先,PHP是一种广泛使用的服务器端脚本语言,尤其适合于Web开发。在这个场景下,PHP将处理用户的请求,与数据库进行交互,并返回相应的响应。...

    jquery学习资料+poi处理excel的教程

    6. **插件和扩展**: jQuery社区提供了大量的插件,如表单验证、轮播图、时间选择器等,它们极大地扩展了jQuery的功能。 **Apache POI处理Excel** Apache POI是Java库,用于读写Microsoft Office格式的文件,包括...

    javascript+jquery+ajax相关学习资料PPT

    它为网页增加了动态功能,如表单验证、动态内容更新等。在浏览器环境中,JavaScript可以操作DOM(文档对象模型),改变HTML元素,响应用户事件,以及与服务器进行异步通信。 jQuery是一个JavaScript库,它的出现...

    2016javascript+jquery学习文档

    通过学习这个资源包,你可以全面掌握JavaScript和jQuery的基础知识,并有能力运用它们构建具有丰富交互性的网页应用。同时,了解CSS将帮助你更好地控制网页的外观和布局,从而成为一名全面的前端开发者。

    Jquery、YUI、ExtJs 三大javascript框架表单验证带提示功能的demo

    本教程将深入探讨Jquery、YUI和ExtJs这三大JavaScript框架在表单验证和提示功能方面的应用。 **jQuery** jQuery是一款轻量级、高性能的JavaScript库,以其简洁的API和跨浏览器兼容性闻名。在表单验证方面,jQuery...

    从零开始学习jQuery word格式完整版

    最后,通过实际项目练习巩固所学知识,例如构建响应式导航菜单、实现图片轮播、创建表单验证等常见功能。这将帮助学习者将理论知识转化为实际能力,更好地应对实际工作中的挑战。 总结:从零开始学习jQuery不仅要求...

    jQuery formValidator表单验证插件

    jQuery formValidator表单校验插件支持的验证功能: 支持所有类型客户端控件的校验 支持jQuery所有的选择器语法,只要控件有唯一ID和type属性。 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你...

    jquery表单验证详解

    总之,**jQueryformValidator**是一款功能强大且易于使用的表单验证工具,它不仅简化了开发流程,提高了代码质量和开发效率,还增强了用户界面的友好性,是现代Web应用开发中不可或缺的一部分。

Global site tag (gtag.js) - Google Analytics