[TOC] > [菜鸟教程](https://www.runoob.com/jquery/jquery-plugin-validate.html) ## 导入js ``` <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> ``` ## 默认校验规则 如果是boole 类型则需要以 `email="true"` 写入标签 |序号|规则|描述| |---|---|---| |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 |必须输入整数。| |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。| ## 使用方式 ### 将校验规则写到控件中 ``` <script> $.validator.setDefaults({ submitHandler: function() { alert("提交事件!"); } }); $().ready(function() { $("#commentForm").validate(); }); </script> <form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <legend>输入您的名字,邮箱,URL,备注。</legend> <p> <label for="cname">Name (必需, 最小两个字母)</label> <input id="cname" name="name" minlength="2" type="text" required> </p> <p> <input class="submit" type="submit" value="Submit"> </p> </fieldset> </form> ``` ### 将校验规则写到 js 代码中 ``` $("#signupForm").validate({ rules: { password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, messages: { username: { required: "请输入用户名", minlength: "用户名必需由两个字母组成" }, password: { required: "请输入密码", minlength: "密码长度不能小于 5 个字母" }, }) }); ``` ## 注意事项 ### 用其他方式替代默认的 SUBMIT 单独设置 ``` submitHandler:function(form){$(form).ajaxSubmit();}}); ``` 默认设置 ``` $.validator.setDefaults({ submitHandler: function(form) { form.submit(); } }); ``` ### debug,只验证不提交表单 ``` debug:true ``` ### 更改错误信息显示的位置 //把错误放置在字段的后面 ``` errorPlacement: function(error, element) {error.appendTo(element.parent()); } ``` ### 每个字段验证通过执行函数 在通过验证的字段后添加 " ✔验证成功" ``` //style .check::after{ content: "✔验证成功"; color:green; margin-left: 5px; } success:function(label){ label.addClass("check"); }, ``` ###异步验证 //接口返回 字符串的 `"true"` 或者`"false"` ``` <label >昵称 <input type="text" name="nickname" remote="a.php" > </label> <br> messages:{ nickname:{ remote:"昵称不唯一" } } ``` ### radio 和 checkbox、select 的验证 [查看](http://www.runoob.com/jquery/jquery-plugin-validate.html) ### 对单个元素进行验证 在共有表单外,需要额外添加单独的验证 ## 常用自定义的效验 ### 邮政编码验证 ``` //写在html中 <input type="text" isZipCode="true"> jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码"); ``` ### 手机验证 ``` $.validator.addMethod("isMobile",function(value,element,params){ var length = value.length; var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/; return this.optional(element) || (length == 11 && mobile.test(value)); },"手机格式不正确"); ```