jQuery--Validation插件（概述、表单验证、验证规则、自定义验证规则）详解

你的名字 2021-08-13 16:30 584阅读 0赞

#### Validation简介 ####

最常使用的JavaScript的场合就是表单验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件——Validation。

Validation拥有如下特点：

*  内置验证规则：用于必填、数字、E-mail、URL和信用卡号码等19类内置验证规则
 *  自定义验证规则：可以很方便地自定义验证规则
 *  简单而强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信心的功能
 *  实时验证：可以通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证

#### Validation的使用 ####

**下载：**  
[Validation下载][Validation]

**引入：**

1.  将jQuery源文件和jquery.validate.js引入到工程中
2.  编写js代码对表单进行验证

#### Validation的语法 ####

$("from表单的选择器").validate(json数据格式);//键值对 键：值 ({})

**表单验证的格式：**

//json数据格式：
    { 
    	rules:{ 
    		表单项name值：校验规则,
    		表单项name值：校验规则...
    	},
    	messages:{ 
    		表单项name值：错误提示信息,
    		表单项name值：错误提示信息...
    	}
    }
    //其中：校验规则，可以是一个也可以是多个，如果是多个使用json格式

#### Validation校验规则 ####

<table> 
 <thead> 
  <tr> 
   <th align="center">规则</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">required:true</td> 
   <td align="center">必输字段,不能为空</td> 
  </tr> 
  <tr> 
   <td align="center">remote:“remote-valid.jsp”</td> 
   <td align="center">使用ajax方法调用remote-valid.jsp验证输入值</td> 
  </tr> 
  <tr> 
   <td align="center">email:true</td> 
   <td align="center">必须输入正确格式的电子邮件</td> 
  </tr> 
  <tr> 
   <td align="center">url:true</td> 
   <td align="center">必须输入正确格式的网址</td> 
  </tr> 
  <tr> 
   <td align="center">date:true</td> 
   <td align="center">必须输入正确格式的日期，日期校验ie6出错，慎用</td> 
  </tr> 
  <tr> 
   <td align="center">dateISO:true</td> 
   <td align="center">必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性</td> 
  </tr> 
  <tr> 
   <td align="center">number:true</td> 
   <td align="center">必须输入合法的数字(负数，小数)</td> 
  </tr> 
  <tr> 
   <td align="center">digits:true</td> 
   <td align="center">必须输入整数</td> 
  </tr> 
  <tr> 
   <td align="center">creditcard:true</td> 
   <td align="center">必须输入合法的信用卡号</td> 
  </tr> 
  <tr> 
   <td align="center">equalTo:"#password"</td> 
   <td align="center">输入值必须和#password相同</td> 
  </tr> 
  <tr> 
   <td align="center">accept:</td> 
   <td align="center">输入拥有合法后缀名的字符串（上传文件的后缀）</td> 
  </tr> 
  <tr> 
   <td align="center">maxlength:5</td> 
   <td align="center">输入长度最多是5的字符串(汉字算一个字符)</td> 
  </tr> 
  <tr> 
   <td align="center">minlength:10</td> 
   <td align="center">输入长度最小是10的字符串(汉字算一个字符)</td> 
  </tr> 
  <tr> 
   <td align="center">rangelength:[5,10]</td> 
   <td align="center">输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)</td> 
  </tr> 
  <tr> 
   <td align="center">range:[5,10]</td> 
   <td align="center">输入值必须介于 5 和 10 之间</td> 
  </tr> 
  <tr> 
   <td align="center">max:5</td> 
   <td align="center">输入值不能大于5</td> 
  </tr> 
  <tr> 
   <td align="center">min:10</td> 
   <td align="center">输入值不能小于10</td> 
  </tr> 
 </tbody> 
</table>

**默认的提示信息：**

messages: { 
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: $.validator.format("Please enter no more than {0} characters."),
    minlength: $.validator.format("Please enter at least {0} characters."),
    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
    range: $.validator.format("Please enter a value between {0} and {1}."),
    max: $.validator.format("Please enter a value less than or equal to {0}."),
    min: $.validator.format("Please enter a value greater than or equal to {0}.")
    }

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
    	<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
    	<script type="text/javascript" src="js/messages_zh.js" ></script>
    	<script type="text/javascript"> $(function(){ $("#checkForm").validate({ rules:{ uname:{ required:true,//用戶名必填 minlength:6//最少6位 }, pwd:{ required:true,//必填 rangelength:[8,12]//8-12位 }, pwd2:{ required:true,//必填 equalTo:pwd//与pwd相同 }, email:{ required:true,//必填 email:true//必须为Email格式 } }, messages:{ uname:{ required:"用户名不能为空", minlength:"用户名不得少于6位" }, pwd:{ required:"密码不能为空", rangelength:"密码必须为8-12位" }, pwd2:{ required:"密码不能为空", equalTo:"两次密码输入不一致" }, email:{ required:"格式错误", } } }); }); </script>
    	<style> .error{ color: red; } </style>
    	<body>
    		<div id="main">
    			<form action="#" method="post" id="checkForm">
    				用户名:<input type="text" id="uname" name="uname" /><br />
    				密码:<input type="password" id="pwd" name="pwd" /><br />
    				确认密码:<input type="password" id="pwd2" name="pwd2" /><br />
    				Email:<input type="email" id="email" name="email"/><br />
    				<input type="submit" id="sub" name="sub" value="提交" />
    				<input type="reset" value="重置" style="margin-left: 100px;"/>
    			</form>
    			
    		</div>
    	</body>
    </html>

![在这里插入图片描述][20191003231832226.png]  
注意：  
当错误提示信息不按照我们预想的位置显示时，我么你可以按照如下方式进行设置自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出阿里，jQuery验证插件会自动帮助我们控制它的显示与隐藏

如果设置了leble标签就不必在messages中设置此表单项错误提示信息了。

#### 自定义校验规则 ####

自定义校验规则步骤如下：  
**1. 调用方法：**

$.validator.addMethod("校验规则名称", function(value, element, params){ })

*  value：校验组件的value值
 *  element：校验组件的节点对象
 *  params：校验规则的参数

**2. 在rules中通过校验规则名称使用校验规则：**  
**3. 在messages中定义该规则对应的错误提示信息：**

示例：

//自定义校验规则
    $.validator.addMethod(
    	//规则名称
    	"checkUsername",
    	//校验函数
    	function(value,element,params){ 
    		
    		//标识
    		var flag = false;
    		//ajax异步校验用户名是否存在
    		$.ajax({ 
    			"async":false,
    			"url":"${pageContext.request.contextPath}/checkUsername",
    			"data":{ "username":value},
    			"type":"POST",
    			"dataType":"json",
    			"success":function(data){ 
    				flag = data.isExist;
    			}
    		});
    		return !flag;
    	}

[Validation]: https://plugins.jquery.com/validation/
[20191003231832226.png]: /images/20210813/4fd408e5a92a49ebad10417f8d36a760.png