jquery validation纪要，我们的好伴侣

柔情只为你懂 2022-06-11 00:37 161阅读 0赞

首先明确一点，jquery validation框架是为form标签使用的，其它不在form标签里的使用无效。被他吸引是因为框架可以做到自动做参数验证，而且有提示，提示还是动态的，省去了我们在页面里加各种标签为了显示错误提示而带来的工作量。

1.初探，该框架包含4个js文件

第一个当然是基础的jquery.js

第二个是jquery.validate.min.js包含是验证的主要逻辑

第三个语言包messages\_zh.js，它包含默认的提示语，有中文，英文共60个国家和地区的语言。

第四个是 additional-methods.js，一般添加的自定义校验方法在里面。自定义校验规则也可以单独其它到其它方法里，所以additional-methods.js不是必需的文件。

输入如下：

这4个js文件最重要，其它的到其要时再引入和学习即可。

2.语法

默认的几个检验规则，当然这个也是可以自定义的,后面会写到。

2.1必填选项：required:true,简写required,全写是required:true,2个都有效

2.2 数字

合法值：number:true   必须输入合法的数字（负数，小数）

digits:true 必须输入整数。

最小值：min:10     输入值不能小于 10。

最大值：max:5      输入值不能大于 5。

某个范围：range:\[5,10\] 输入值必须介于 5 和 10 之间。

2.3字符串

最小长度：minlength:10    输入长度最小是 10 的字符串（汉字算一个字符）。

最大长度：maxlength:5       输入长度最多是 5 的字符串（汉字算一个字符）。

某个长度字符串：rangelength:\[5,10\]  输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。

2.4 其它

格式后缀：以前版本叫accept，新版本中改为extension，比如extension:'gif|jpe?g|png'

url验证:   url:true      必须输入正确格式的网址。

email验证:    email:true     必须输入正确格式的电子邮件。

日期：date:true     必须输入正确格式的日期。日期校验ie6 出错，慎用。

dateISO:true       必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。

remote:远程校验是否合法，向rul指定的路径发送请求，如果为ture则校验成功，为false则校验失败

3.第一个例子

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script>
    $.validator.setDefaults({
    submitHandler: function(form) {
       $(form).submit();
          alert("提交事件!");
        }
    });
    $().ready(function() {
    // 让校验规则生效
      $("#signupForm").validate({
    	    rules: {
    	      firstname: "required",
    	      lastname: "required",
    	    },
    	    messages: {
    	      firstname: "请输入您的名字",
    	      lastname: "请输入您的姓氏",
    	      username: {
    	        required: "请输入用户名",
    	        minlength: "用户名必需由两个字母组成"
    	      }
    	    }
    	});
    });
    </script>
    <style>
    .error{
    	color:red;
    }
    </style>
    </head>
    <body>
    <form class="cmxform" id="signupForm" method="get" action="">
      <fieldset>
        <legend>验证完整的表单</legend>
        <p>
          <label for="firstname">名字</label>
          <input name="firstname" type="text">
        </p>
        <p>
          <label for="lastname">姓氏</label>
          <input  name="lastname" type="text">
        </p>
        <p>
          <input class="submit" type="submit" value="提交">
        </p>
      </fieldset>
    </form>
    </body>
    </html>

运行效果如下：

![Center][]

结论如下：

1.想要让校验生效要调用validate()方法

2.rules是校验规则的集合，规则key是from表单里标签的name字段，比如firstname:"required"里firstname与label标签里name是firstname标签绑定。

3.required 在2种写法，简写直接当字符串使用”required”,或者当成对象使用\{required:true\},2种方式没区别

4.messages是提示消息，取值也是按key取值的。标签下不同的校验准备给不同的提示。

4.想要了解jquery validation框架只需要掌握2点，

第一：参数怎么验证，消息提示怎么配置。

第二：消息在哪里显示。

4.1参数怎么验证：

4.1.1 调用 validate()让规则和其它设置生效，不传参数的话则使用默认值

4.1.2 在validate()方法里添加rules，message,errorPlacement等参数

4.1.3调用setDefaults方法设置默认参数，可调或不调用,不调用的话则将submitHandler放在validate方法里，

例如$.validator.setDefaults(\{

submitHandler:function(form) \{

$(form).submit();

alert("submitted!");

\});

4.2.消息在哪里显示：

errorElement:指定使用什么标签标记错误，类型是String,默认“label”

wrapper:指定使用什么标签再把上边的errorElement包起来，类型是String，没特殊要求可以不设置

errotContainer:Selector, 显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大

4.2.1.灵活性高的方式，动态修改。errorPlacement:指定错误信息的位置，类型function,默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面，我们可以修改它，

errorPlacement:function(error, element) \{

error.appendTo(element.parent());

error显示错误信息的标签，element是被验证的标签

4.2.2.单一方式，指定信息容器。errorLabelContainer:把错误信息统一放一个容器里，类型是Selector，一般常用在显示将错误信息集中在一个容器里的情况，如果要在不同的标签后面显示各自的提示就不用设置。

errorClass:指定的错误的样式，

例如：

$("\#myform").validate(\{

errorElement:"label",

errorLabelContainer:"\#messageBox",

wrapper:"li",

errorClass:"error"

submitHandler:function()\{

alert("Submitted!")

\})

错误信息用label显示，外层再包一层li,最后将所以的错误提示放到messageBox里显示。

4.2.3消息显示时将错误提示事先放在html容器里：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>Test for jQuery validate() plugin</title>
    	<link rel="stylesheet" media="screen" href="css/screen.css">
    	<script src="../lib/jquery.js"></script>
    	<script src="../dist/jquery.validate.js"></script>
    	<style>
    	.cmxform fieldset p.error label {
    		color: red;
    	}
    	div.container {
    		background-color: #eee;
    		border: 1px solid red;
    		margin: 5px;
    		padding: 5px;
    	}
    	div.container ol li {
    		list-style-type: disc;
    		margin-left: 20px;
    	}
    	div.container {
    		display: none
    	}
    	.container label.error {
    		display: inline;
    	}
    	form.cmxform {
    		width: 30em;
    	}
    	form.cmxform label.error {
    		display: block;
    		margin-left: 1em;
    		width: auto;
    	}
    	</style>
    	<script>
    	// only for demo purposes
    	$.validator.setDefaults({
    		submitHandler: function() {
    			alert("submitted! (skipping validation for cancel button)");
    		},
    		debug:true
    	});
    
    	$().ready(function() {
    		var container = $('div.container');//指定错误容器
    		// validate the form when it is submitted
    		var validator = $("#form1").validate({
    			errorContainer: container,
    			errorLabelContainer: $("ol", container),
    			wrapper: 'li'
    		});
    
    		$(".cancel").click(function() {
    			validator.resetForm();
    		});
    	});
    	</script>
    </head>
    
    <body>
    	<h1 id="banner"><a href="http://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
    	<div id="main">
    		
    		<div class="container">
    			<h4>errorLabelContainer：这是一个错误显示面板</h4>
    			<ol>
    				<li>
    					<label for="email" class="error">Please enter your email address</label>
    				</li>
    				<li>
    					<label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label>
    				</li>
    				<li>
    					<label for="address" class="error">Please enter your address (at least 3 characters)</label>
    				</li>
    				<li>
    					<label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label>
    				</li>
    				<li>
    					<label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label>
    				</li>
    			</ol>
    		</div>
    		<form class="cmxform" id="form1" method="get" action="">
    			<fieldset>
    				<legend>Validating a complete form</legend>
    				<p>
    					<label for="email">Email</label>
    					<input id="email" name="email" required type="email">
    				</p>
    				<p>
    					<label for="agree">Favorite Color</label>
    					<select id="color" name="color" title="Please select your favorite color!" required>
    						<option></option>
    						<option>Red</option>
    						<option>Blue</option>
    						<option>Yellow</option>
    					</select>
    				</p>
    				<p>
    					<label for="phone">Phone</label>
    					<input id="phone" name="phone" required type="number" rangelength="[2,8]">
    				</p>
    				<p>
    					<label for="address">Address</label>
    					<input id="address" name="address" required minlength="3">
    				</p>
    				<p>
    					<label for="avatar">Avatar</label>
    					<input type="file" id="avatar" name="avatar" required>
    				</p>
    				<p>
    					<label for="agree">Please agree to our policy</label>
    					<input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" required>
    				</p>
    				<p>
    					<input class="submit" type="submit" value="Submit">
    					<input class="cancel" type="submit" value="Cancel">
    				</p>
    			</fieldset>
    		</form>
    		<div class="container">
    			<h4>errorContainer：显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大</h4>
    		</div>
    		<a href="index.html">Back to main page</a>
    	</div>
    </body>
    </html>

errorContainer指定可以自动实现有错误信息出现时把容器属性变为显示

errorLabelContainer:将错误信息包起来。

4.2.4 js里指定错误提示位置及其它相关参数，常用方式，因为看起来页面简单：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script>
    $.validator.setDefaults({
        submitHandler: function() {
          alert("提交事件!");
        }
    });
    $().ready(function() {
      $("#signupForm").validate({
      //指定规则
    	    rules: {
    	      firstname: "required",
    	      lastname: "required",
    	      username: {
    	        required: true,
    	        minlength: 2
    	      },
    	      password: {
    	        required: true,
    	        minlength: 5
    	      },
    	      confirm_password: {
    	        required: true,
    	        minlength: 5,
    	        equalTo: "#password"
    	      },
    	      email: {
    	        required: true,
    	        email: true
    	      },
    	      "topic[]": {
    	        required: "#newsletter:checked",
    	        minlength: 2
    	      },
    	      agree: "required"
    	    },
    		//指定错误提示位置
    		errorPlacement: function(label, element) {
    				// position error label after generated textarea
    				if (element.is("textarea")) {
    					label.insertAfter(element.next());
    				} else {
    					label.insertAfter(element)
    				}
    			},
    		wrapper :"li",//指定label的包裹
    		//规则里每个字段对象的消息提示
    	    messages: {
    	      firstname: "请输入您的名字",
    	      lastname: "请输入您的姓氏",
    	      username: {
    	        required: "请输入用户名",
    	        minlength: "用户名必需由两个字母组成"
    	      },
    	      password: {
    	        required: "请输入密码",
    	        minlength: "密码长度不能小于 5 个字母"
    	      },
    	      confirm_password: {
    	        required: "请输入密码",
    	        minlength: "密码长度不能小于 5 个字母",
    	        equalTo: "两次密码输入不一致"
    	      },
    	      email: "请输入一个正确的邮箱",
    	      agree: "请接受我们的声明",
    	      topic: "请选择两个主题"
    	    }
    	});
    });
    </script>
    <style>
    .error{
    	color:red;
    }
    </style>
    </head>
    <body>
    <form class="cmxform" id="signupForm" method="get" action="">
      <fieldset>
        <legend>验证完整的表单</legend>
        <p>
          <label for="firstname">名字</label>
          <input id="firstname" name="firstname" type="text">
        </p>
        <p>
          <label for="lastname">姓氏</label>
          <input id="lastname" name="lastname" type="text">
        </p>
        <p>
          <label for="username">用户名</label>
          <input id="username" name="username" type="text">
        </p>
        <p>
          <label for="password">密码</label>
          <input id="password" name="password" type="password">
        </p>
        <p>
          <label for="confirm_password">验证密码</label>
          <input id="confirm_password" name="confirm_password" type="password">
        </p>
        <p>
          <label for="email">Email</label>
          <input id="email" name="email" type="email">
        </p>
        <p>
          <label for="agree">请同意我们的声明</label>
          <input type="checkbox" class="checkbox" id="agree" name="agree">
        </p>
        <p>
          <label for="newsletter">我乐意接收新信息</label>
          <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
        </p>
        <fieldset id="newsletter_topics">
          <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
          <label for="topic_marketflash">
            <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
          </label>
          <label for="topic_fuzz">
            <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
          </label>
          <label for="topic_digester">
            <input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester
          </label>
          <label for="topic" class="error" style="display:none">至少选择两个</label>
        </fieldset>
        <p>
          <input class="submit" type="submit" value="提交">
        </p>
      </fieldset>
    </form>
    </body>
    </html>

![Center 1][]

5.validate方法里success属性指定了都验证成功后的回调函数，语法是success:String,callBack

如果只传第一个参数会将其当成样式class,也可单独传方法做为回调函数

6.添加自定义校验规则

比如我们想添加个验证手机号码的验证规则：

$.validator.addMethod( "phoneUK", function( phone_number, element ,param) {
        alert(phone_number + ":" + element + ":" + param);
    	phone_number = phone_number.replace( /$|$|\s+|-/g, "" );
    	return this.optional( element ) || phone_number.length > 9 &&
    		phone_number.match( /^(?:(?:(?:00\s?|\+)44\s?)|(?:$?0))(?:\d{2}$?\s?\d{4}\s?\d{4}|\d{3}\)?\s?\d{3}\s?\d{3,4}|\d{4}\)?\s?(?:\d{5}|\d{3}\s?\d{3})|\d{5}\)?\s?\d{4,5})$/ );
    }, "Please specify a valid phone number" );

语法如下：addMethod：name, method, message

第一个参数是校验规则名

第二个是方法是校验方法，有3个参数，第一个参数是传入的值，第二个参数是要校验的标签，第三个参数是使用的方式时传的值。

第三个参数是默认的提示，当然我们可以在validate的message对象里添加自己的提示。

在form里使用方式如下：

在上面的自定义校验方法里添加了打印，提示如下：

![Center 2][]

可以得出结果：

第一个参数是我们输入的值，第二个参数是要校验的标签，第三个参数true，如果我们传入不是true也可以，比如phoneUK="test"，打印出来的是：

![Center 3][]

**备注：**

**全局指定错误消息的样式,比如错误使用label显示的，则如下：  
label.error\{**

**         color:\#EA5200;**

**padding-left: 16px;**

**    padding-bottom: 2px;**

**    font-weight: bold;**

**  ....**

**\}**

**这样错误消息都是这个样式**

后话，想要了解更多，建议到git上去下载官方提供的 [源码及例子][Link 1]

[Center]: /images/20220611/587a3fe4f2634bd68ae8a84bb0c411f2.png
[Center 1]: /images/20220611/820ab53b0f5b415a98f4f98a40c82fcb.png
[Center 2]: /images/20220611/005afb8498dc4812adb1788c15942d2a.png
[Center 3]: /images/20220611/7eb4dc37e7cf4f49ab4a30c7797ed7ec.png
[Link 1]: https://github.com/jquery-validation/jquery-validation/releases/tag/1.16.0