jquery validate使用Demo实例说明

1. //validate 选项***********************************************************  
2.         $("form").validate({  
3.   
4.             debug:true  //进行调试模式（表单不提交）  
5.             rules:{  
6.                 name:"required", //自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象  
7.                 email:{  
8.                     //内置验证方式  
9.                     required:true, //必填项  
10.                     required:"#aa:checked"表达式的值为真,则必填项  
11.                     required:function(){}返回为真,则必填项  
12.                     email:true,   //验证电子邮箱格式  
13.                     minlength:5,  //设置最小长度  
14.                     maxlength:10, //设置最大长度  
15.                     rangelength:[5,10],//设置一个长度范围[min,max]  
16.                     min:2,        //设置最小值  
17.                     max:8,       //设置最大值  
18.                     range:[2,8]      //设置值的范围  
19.                     url:true,         //验证URL格式  
20.                     date:true,    //验证日期格式(类似30/30/2008的格式,不验证日期准确性只验证格式)  
21.                     dateISO:true, //验证ISO类型的日期格式 例如：2009-06-23  
22.                     dateDE:true,  //验证德式的日期格式（29.04.1994 or 1.1.2006）  
23.                     number:true,  //验证十进制数字（包括小数的）  
24.                     digits:true,  //验证整数  
25.                     creditcard:true, //验证信用卡号  
26.                     accept:""     //请输入拥有合法后缀名的字符串（上传文件的后缀）  
27.                     equalTo:"id名" //验证两个输入框的内容是否相同  
28.                     phoneUS:true   //验证美式的电话号码  
29.                     regex:/正则表达式/     //上面addMethod扩展的验证规则  
30.                 }  
31.             }  
32.   
33.             messages:{  
34.                 name:"Name不能为空",  //自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数  
35.                 email:{  
36.                    required:"E-mail不能为空",  
37.                    email:"E-mail地址不正确"  //validate 内置验证有默认的英语提示 此处为重新自定义  
38.                 }  
39.             }  
40.   
41.             errorPlacement: function(error,element) {  
42.                 element.parents('.form-group').children(".help-block").html(error); //错误显示的位置 element验证的元素error错误提示  
43.             }  
44.   
45.             submitHandler:function(form) {//通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交  
46.                 $(form).ajaxSubmit();    
47.                 //form.submit();  
48.             }  
49.   
50.             success:"类名"   //要验证的元素通过验证后的动作,跟一个字符串,会给输出错误的元素追加一个css类  
51.             ignore:".ignore" //对某些元素不进行验证  
52.             onsubmit:false   //是否提交时验证 默认:true  
53.             onfocusout:false //是否在获取焦点时验证 默认:true   
54.             onkeyup:false    //是否在敲击键盘时验证 默认:true  
55.             onclick:false    //是否在鼠标点击时验证(一般验证checkbox,radiobox) 默认:true  
56.             focusInvalid:false //提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点 默认:true  
57.             focusCleanup:true  //当未通过验证的元素获得焦点时,并移除错误提示（避免和 focusInvalid.一起使用）默认:false  
58.             errorClass:"类名"  //指定错误提示的css类名,可以自定义错误提示的样式 默认:"error"  
59.             errorElement:"标签" //使用什么标签标记错误 默认:"label"  
60.             wrapper:"标签"      //使用什么标签再把上边的errorELement包起来  
61.             errorLabelContainer:"容器id"  //把错误信息统一放在一个容器里面  
62.             showErrors:function(errorMap,errorList) { //跟一个函数,可以显示总共有多少个未通过验证的元素  
63.                 $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");  
64.                 this.defaultShowErrors();  
65.             }  
66.         })  
67.   
68.   
69.         //validate方法 返回一个Validator对象,它有很多方法, 让你能使用引发校验程序或者改变form的内容**************  
70.   
71.         $.validator.setDefaults({//设置validator默认  
72.             debug:true,  //把调试模式设置为默认 如果一个页面中有多个表单一般用这种方式  
73.             errorClass: "txt-impt", //设置默认错误提示的css类名  
74.             errorElement: "div"     //设置默认错误提示的标签  
75.         })  
76.   
77.         //addMethod(name,method,message)方法：name(自定义rules的key) method(自定义验证方法) message(报错输出的提示)  
78.         jQuery.validator.addMethod("regex",function(value, element, params){  //扩展方法示例:　　　　　　　　　　　  
79.             var exp = new RegExp(params); //params rules的value传入的正则表达式  
80.             return exp.test(value);       //value  被验证的input传入的值  
81.         },"输入格式有误");  
82.   
83.         //扩展rules规则  
84.         jQuery.validator.addClassRules("name", {  
85.             required: true,  
86.             minlength: 2  
87.         });  
88.         jQuery.validator.addClassRules({  
89.             name: {  
90.                 required: true,  
91.                 minlength: 2  
92.             },  
93.             zip: {  
94.                 required: true,  
95.                 digits: true,  
96.             }  
97.         });  
98.         $("#myinput").rules("add", {    
99.             required: true,    
100.             minlength: 2,    
101.             messages: {    
102.                 required: "Required input",    
103.                 minlength: jQuery.format("Please, at least {0} characters are necessary")    
104.             }    
105.         });   
106.         $("#myinput").rules("remove"); //全部移除验证规则  
107.         $("#myinput").rules("remove", "min max") //移除 min max  
108.   
109.         var form=$('form');  
110.         $(".formBtn").click(function(){ //按钮type非submit or submit按钮不在form内  
111.             console.log("Valid: " + form.valid()) //form.valid() 验证成功返回true  
112.             var validator = $("form").validate(setValidate);  
113.             var formState=validator.form();      //判断验证状态 返回Boolean  
114.                 //validator.element("id名") 验证某个元素 返回Boolean  
115.                 //validator.resetForm()  把前面验证的FORM恢复到验证前原来的状态  
116.                 /*validator.showErrors({ 
117.                     "firstname": "I know that your firstname is Pete, Pete!" 
118.                 }); 显示自定义的错误信息 */  
119.   
120.             if(formState==false){  
121.                 return;  
122.             }else{  
123.                 //do someing...  
124.             }     
125.         })  
126.   
127.         //使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项 后台只允许返回false和true  
128.         remote: "check-email.php"    
129.         remote: {    
130.             url: "check-email.php",     //后台处理程序    
131.             type: "post",               //数据发送方式    
132.             dataType: "json",           //接受数据格式       
133.             data: {                     //要传递的数据    
134.                 username: function() {    
135.                     return $("#username").val();    
136.                 }    
137.             }    
138.         }    
139.   
140.   
141.         //meta String方式***************************************************************  
142.   
143.         //引入js  
144.         <script type="text/javascript" src="js/jquery.metadata.js"></script>  
145.         <script type="text/javascript" src="js/jquery.validate.js"></script>  
146.   
147.         //dom上验证规则写法  
148.         <input type="text" name="email" class="{validate:{ required:true,email:true }}" />  
149.   
150.         //设置为meta String验证方式  
151.         $("#myform").validate({  
152.            meta:"validate",  
153.            submitHandler:function() { alert("Submitted!") }  
154.         })