利用validate进行表单校验

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。----截取自http://www.runoob.com/jquery/jquery-plugin-validate.html

本文就利用jquery的validate插件来实现表单的校验功能，首先来一个简单的案例：

html代码如下：

		

			

				

					
测试表单
				
				

					
用户名（必填字段，长度范围6~10）
					

						
					
				
				

					
Email（符合邮件格式）
					

						
					
				
				

					
出生日期（日期格式）
					

						
					
				
				

					
薪资（数字）
					

						
					
				
				

					
一天工作时长（值范围6~16）
					

						
					
				
				

					
密码（必须填写）
					

						
					
				
				

					
确认密码（必须填写，且与密码值要相同）
					

						
					
				
				

					

					

						
					
				
			
		
	

1）文件中定义了很多的表格的单元格分别让用户输入符合规则的文本内容，前提是 必须是form的表单才可以进行验证，这点本人已经进行了相关的验证，而且

中必须在type中填入submit属性。

2）在相应的script代码块中写入jquery代码，必须先进行页面加载完成时的函数中进行，因为是写在head标签中，如果不加入页面加载完成时的相关代码则会导致页面加载不完全，找不到相应标签。之后在其中为对应的表单加入validate约束。其中的书写方式是以key：{}形式完成的。rules是规则，里面嵌套标签名，标签名中嵌套对应的一些规则，规则具体如下，使用时查询相应的api

1	required:true	必须输入的字段。
2	remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:"#field"	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

之后也可以利用messages以同样的书写规则自定义错误信息。

下面贴出具体表单校验的源代码以及实现方式：

	
		
		
		
		
		
		
		
	
	
		

			

				

					
测试表单
				
				

					
用户名（必填字段，长度范围6~10）
					

						
					
				
				

					
Email（符合邮件格式）
					

						
					
				
				

					
出生日期（日期格式）
					

						
					
				
				

					
薪资（数字）
					

						
					
				
				

					
一天工作时长（值范围6~16）
					

						
					
				
				

					
密码（必须填写）
					

						
					
				
				

					
确认密码（必须填写，且与密码值要相同）
					

						
					
				
				

					

					

						
					
				
			
		
	

其中有许多字段没有添加自定义的messages，大家可以对照进行相关练习。

扩展知识：关于自定义规则和错误信息的方式：

如果官方提供的一些功能不能满足我们的需求，我们可以在jquery代码中自定义相关的规则和错误信息，必须身份证的校验等，具体框架如下：

		

			

				

					
测试表单
				
				

					
用户名（必填字段，长度范围6~10）
					

						
					
				
				
				

					
身份证号（必须填写，必须符合身份证号码规则）
					

						
					
				
				

					

					

						
					
				
			
		
	

这里我们需要在表单校验的jquery代码执行之前自定义我们的规则和错误信息，这里错误信息必须我们自己提供，因为文档中没有相应的错误信息，不会显示相应的错误提示。代码如下所示：

自此关于validate的相关功能大体之上已经说完了，至此可以看出validate进行表单校验比jquery和js通过绑定onclick事件来进行校验要简单的多