表单校验插件Validate.js&自定义规则校验

一、jquery插件

网络上有许多成熟的插件供使用者参考，插件就是将jquery实现的常用操作进行封装，封装后的小框架就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而这些复杂功能的背后实现我们可以不必懂。
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

二、使用Validate插件

步骤：

1.导入js库，将jquery的原始文件和插件文件jquery.validate.js导入到工程中

因为validate是JQuery的插件，所以必须先导入JQuery和validate的JS包

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<!--引入validation.js插件-->
<script src="js/jquery.validate.min.js" type="text/javascript"></script>

2.编写js代码对表单进行验证

表单验证的格式：

$("form表单的选择器").validate(json数据格式);  //键值对  键：值（{}）
json数据格式：
{
  rules:{
        表单项name值:校验规则，
        表单项name值:校验规则... ...
  },
  messages:{
        表单项name值:错误提示信息，
        表单项name值:错误提示信息... ...
  }
  }

代码实例

$(function(){
	$("#myform").validate({
		rules:{
			"username":{
				"required":true,
				"checkUsername":true
			},
			"password":{
				"required":true,
				"rangelength":[6,12]
			},
			"repassword":{
				"required":true,
				"rangelength":[6,12],
				"equalTo":"#password"
			},
			"email":{
				"required":true,
				"email":true
			},
			"sex":{
				"required":true
			}
		},


		messages:{
			"username":{
				"required":"用户名不能为空",
				"checkUsername":"用户名已存在"
			},
			"password":{
				"required":"密码不能为空",
				"rangelength":"密码长度6-12位"
			},
			"repassword":{
				"required":"密码不能为空",
				"rangelength":"密码长度6-12位",
				"equalTo":"两次密码不一致"
			},
			"email":{
				"required":"邮箱不能为空",
				"email":"邮箱格式不正确"
			}
		}
	});
});

3.自定义错误显示标签

当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出来，jquery验证插件会自动帮助我们控制它的显示与隐藏。

<lable for="html元素name值" class="error" style="display:none">错误信息</lable>

三、自定义规则校验

如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则

步骤

1. 使用$.validator.addMethod(“校验规则名称”,function(value,element,params)){}

2. 在rules中通过校验规则名称使用校验规则

3. 在messages中定义该规则对应的错误提示信息

其中： value是校验组件的value值；element是校验组件的节点对象；params是校验规则的参数

代码实例

/*自定义校验规则，实现ajax异步  */
$.validator.addMethod(
	//规则的名称
	"checkUsername",
	//校验的函数，这个是验证所调用函数（校验函数），传入三个参数
	function(value,element,params){
		//定义一个标志
		var flag=false;
		//value:输入的内容（表单元素输入的内容，如果此时username表单元素绑定了该校验规则，那么value就是在触发此校验规则时，用户输入的用户名）
		//element:被校验的元素对象
		//params：规则对应的参数值（例：在required:true 传入的params就是true）
		
		//目的：对输入的username进行ajax校验	
		$.ajax({
			//这里必须是同步操作，所以不能使$.post()]和$.get()
			"async":false,
			"url":"${pageContext.request.contextPath}/checkUsername",
			"data":{"username":value},
			type:"POST",
			"dataType":"json",
			"success":function(data){
				flag=data.isExist;
			}
		});
		
		//返回false代表该校验器不通过
		return !flag;
		
		}
	//还可以有一个参数，检验的提示
	//，"请正确填写您的邮政编码"
);