1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>validate</title>
6 <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
7 <script type="text/javascript" src="js/jquery.validate.js" ></script>
8 <script type="text/javascript">
9
10 $(function(){
11 var vali=$("#testForm").validate({
12 rules:{
13 user:{
14 required:true,
15 // minlength:2,
16 // maxlength:10,
17 rangelength:[2,10],//长度范围
18 // remote:"jsonT/data.txt",//远程校验
19 // url:true,//url格式
20 // email:true,//邮箱格式
21 date:true,//日期格式
22 // dateISO:true,//标准日期格式yyyy-mm-dd 也可用/
23 // digits:true,//非负的整数
24 // number:true,
25 },
26 pass:{
27 required:true,
28 // minlength:2,
29 // maxlength:10,
30 // remote:{
31 // url:"",
32 // type:"post",
33 // data:{
34 //
35 // }
36 // }
37 },
38 passre:{
39 equalTo:"#mima",//必须和谁相等
40 }
41 },
42
43 messages:{
44 user:{
45 required:"必须填写用户名",
46 minlength:"用户名最小为2位",
47 maxlength:"用户名最大长度为10位"
48 },
49 pass:{
50 required:"必须填写密码",
51 minlength:"密码长度最小为2位",
52 maxlength:"密码长度最大为10"
53 }
54 }
55
56 });
57
58 vali.showErrors({
59 pass:"你填错了",
60 user:"哟普你不用户名错了",
61 })
62
63 $("#check").click(function(){
64 alert($("#testForm").valid()?"填写正确":"填写错误");
65 })
66
67
68
69 // $("#mima").rules("add",{})//添加规则
70 /**
71 * validate()方法会返回validate对象,此对象的方法:
72 * validate.form()//验证表单是否有效
73 * validate.element(selector)验证元素是否有效
74 * validate.resetForm()回到验证之前的状态
75 * validate.showErrors(options)//错误信息
76 * validate.numberOfInvalids()//返回无效信息的个数
77 *
78 * 静态方法 $.validator.format("{0}-{1}-{2}");占位符
79 * 例: var temp=$.validator.format("{0}-{1}-{2}");
80 * temp("ni ","w","ta");
81 * $.validator.setDefaults();//设置默认设置
82 * $.validator.setDefaults(function(){
83 * debug:true,
84 * })
85 *
86 * classMing添加规则、、
87 * $.validator.addClassRules()
88 * $.validator.addClassRules({
89 * aaa:{
90 * //规则
91 * }
92 * })
93 *
94 * validate()中配置项//
95 * 提交时验证通过触发的
96 * submitHandler:function(aa){
97 *
98 * }
99 * 验证为通过触发
100 * invalidHandler:function(event,validator){
101 *
102 * }
103 * invalid-form事件
104 *
105 * ignore:"selector"//忽略验证的元素
106 *
107 * 在规则中可以使用depends属性来决定此规则是否生效，属性值返回true才进行此属性校验
108 *
109 * groups:{}//用来将要元素的错误信息元素存放进去
110 * groups:{
111 * login："user pass"
112 * }//用来将要元素的错误信息元素存放进,跟errorPlacement:function(error,element){}一块使用
113 *
114 * error 为错误信息
115 * error.insertBefore();//存放位置
116 *
117 * onsubmit 、 onfocusout（是否在获取焦点时验证）、onkeyup、onclick（点击时验证、一般用在复选框或单选）
118 * focusInvalid 验证未通过的信息是否获取焦点、focusCleanup未通过验证的信息是否在获取焦点时移除错误信息
119 *
120 * errorClass:"" 错误提示的class名 自定义样式
121 * validClass:""
122 *
123 * errorElement: 用什么标签标记错误
124 * wrapper: 用什么标签将上面标签包裹
125 * errorLabelContainer 用容器将错误信息统一存储
126 * errorContainer 显示或隐藏验证信息，可以自动在有错误是显示容器，没有时隐藏
127 *
128 * showErrors:function(errorMap,errorList){//errorMap显示的只有错误的信息 ，errorList存放的更详细 ，存储的是对象
129 *
130 * this.defaultErrors();//默认信息
131 * }
132 *
133 * sucess:""//通过的元素添加class名 如果为函数 参数为通过的元素 针对label元素
134 *
135 * highlight:function(element,errorClass,validClass){}//可以给为通过验证的元素添加效果 针对input元素
136 * unhighlight:function(element,errorClass,validClass){}//验证未通过去除效果
137 *
138 * //选择器扩展 :blank值为空 :filled不为空 :unchecked未选中
139 *
140 *
141 * ==================================================================================
142 *
143 * 自定义验证方法
144 * $.validator.addMethod(name,method[,message]); name为方法名称例如 postcode
145 *
146 */
147
148
149
150 });
151
152
153 </script>
154 </head>
155 <body>
156
157 <form id="testForm">
158
159 用户名<input type="text" placeholder="请输入用户名" name="user"/>
160 密码<input type="password" id="mima" name="pass"/>
161 确认密码<input type="password" name="passre"/>
162 <input type="submit" />
163 <input type="button" id="check" />
164 </form>
165
166
167 </body>
168 </html>
时间： 2024-08-24 18:00:15