jQuery validation

引用:http://www.runoob.com/jquery/jquery-plugin-validate.html

validation demo 下载地址:https://github.com/jzaefferer/jquery-validation/releases

导入 js 库（使用菜鸟教程提供的CDN）

<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>

默认校验规则

(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

 1 defaults: {
 2         messages: {},//自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数
 3         groups: {},//对一组元素的验证,用一个错误提示,用error Placement控制把出错信息放在哪里
 4         rules: {},//自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象
 5         errorClass: "error",//指定错误提示的css类名，可以自定义错误提示的样式
 6         pendingClass: "pending",
 7         validClass: "valid",
 8         errorElement: "label",//用什么标签标记错误，默认的是label
 9         focusCleanup: false,//如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用
10         focusInvalid: true,//提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
11         errorContainer: $( [] ),//显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大.errorContainer: "#messageBox1, #messageBox2"
12         errorLabelContainer: $( [] ),//把错误信息统一放在一个容器里面。
13         onsubmit: true,//提交时验证. 设置唯false就用其他方法去验证
14         ignore: ":hidden",//忽略某些元素不验证
15         ignoreTitle: false,

  1     <script src="../dist/localization/messages_zh.js" type="text/javascript"></script>
  2     <script>
  3
  4     //自定义验证方法
  5     // 中文字两个字节
  6     jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
  7         var length = value.length;
  8         for(var i = 0; i < value.length; i++){
  9             if(value.charCodeAt(i) > 127){
 10                 length++;
 11             }
 12         }
 13         return this.optional(element) || ( length >= param[0] && length <= param[1] );
 14     }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
 15
 16     // 邮政编码验证
 17     jQuery.validator.addMethod("isZipCode", function(value, element) {
 18         var tel = /^[0-9]{6}$/;
 19         return this.optional(element) || (tel.test(value));
 20     }, "请正确填写您的邮政编码");
 21
 22     $.validator.setDefaults({//默认
 23
 24     });
 25
 26     $().ready(function() {
 27         $("#commentForm").validate({
 28             debug:true,//如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便
 29             errorContainer: $(‘div.container‘),
 30             errorLabelContainer: $("ol", container),
 31             wrapper: ‘li‘,//用什么标签再把上边的errorELement包起来
 32             errorPlacement: function(error, element) {//跟一个函数,可以自定义错误放到哪里
 33                 error.appendTo(element.parent());//1.默认把错误信息放在验证的元素后面
 34                 //2. Append error within linked label
 35                 $( element ).closest( "form" ).find( "label[for=‘" + element.attr( "id" ) + "‘]" ).append( error );
 36                 //3.
 37                 if ( element.is(":radio") )
 38                     error.appendTo( element.parent().next().next() );
 39                 else if ( element.is(":checkbox") )
 40                     error.appendTo ( element.next() );
 41                 else
 42                     error.appendTo( element.parent().next() );
 43             },
 44             success: function(label) {//要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数
 45                 // set &nbsp; as text for IE
 46                 label.html("&nbsp;").addClass("checked");
 47                 //label.addClass("valid").text("Ok!")
 48             },
 49             submitHandler: function() {//通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
 50                 form.submit();
 51                 $(form).ajaxSubmit();//使用ajax方式
 52                 //通常情况下，我们直接通过form提交的话， 提交后当前页面跳转到form的action所指向的页面。然而，很多时候我们比不希望提交表单后页面跳转，那么，我们就可以ajaxSubmit(obj)来提交数据。
 53                 //ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法，所以使用此方法需要先引入这个插件。
 54                 //<script src="http://malsup.github.io/jquery.form.js"></script
 55                 /*$(this).ajaxSubmit({
 56                     type: ‘post‘, // 提交方式 get/post
 57                     url: ‘your url‘, // 需要提交的 url
 58                     data: {
 59                         ‘title‘: title,
 60                         ‘content‘: content
 61                     },
 62                     success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
 63                         // 此处可对 data 作相关处理
 64                         alert(‘提交成功！‘);
 65                     }
 66                     $(this).resetForm(); // 提交后重置表单
 67                 });*/
 68             }
 69         });
 70
 71         // validate signup form on keyup and submit
 72         $("#signupForm").validate({
 73             rules: {//自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象
 74                 firstname: "required",
 75                 lastname: "required",
 76                 username: {
 77                     required: true,
 78                     minlength: 2
 79                 },
 80                 password: {
 81                     required: true,
 82                     minlength: 5
 83                 },
 84                 confirm_password: {
 85                     required: true,
 86                     minlength: 5,
 87                     equalTo: "#password"
 88                 },
 89                 email: {
 90                     required: true,
 91                     email: true
 92                 },
 93                 topic: {
 94                     required: "#newsletter:checked",
 95                     minlength: 2
 96                 },
 97                 agree: "required"
 98             },
 99             messages: {//自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数
100                 firstname: "Please enter your firstname xc",
101                 lastname: "Please enter your lastname xc",
102                 username: {
103                     required: "Please enter a username xc",
104                     minlength: "Your username must consist of at least 2 characters xc"
105                 },
106                 password: {
107                     required: "Please provide a password xc",
108                     minlength: "Your password must be at least 5 characters long xc"
109                 },
110                 confirm_password: {
111                     required: "Please provide a password xc",
112                     minlength: "Your password must be at least 5 characters long xc",
113                     equalTo: "Please enter the same password as above xc"
114                 },
115                 email: "Please enter a valid email address xc",
116                 agree: "Please accept our policy xc",
117                 topic: "Please select at least 2 topics xc"
118             }
119         });
120
121         // propose username by combining first- and lastname
122         $("#username").focus(function() {
123             var firstname = $("#firstname").val();
124             var lastname = $("#lastname").val();
125             if (firstname && lastname && !this.value) {
126                 this.value = firstname + "." + lastname;
127             }
128         });
129
130         //code to hide topic selection, disable for demo
131         var newsletter = $("#newsletter");
132         // newsletter topics are optional, hide at first
133         var inital = newsletter.is(":checked");
134         var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
135         var topicInputs = topics.find("input").attr("disabled", !inital);
136         // show when newsletter is checked
137         newsletter.click(function() {
138             topics[this.checked ? "removeClass" : "addClass"]("gray");
139             topicInputs.attr("disabled", !this.checked);
140         });
141     });
142     </script>

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}