jquery-validation 表单验证使用方法

jQuery Validate 官网

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form id="demoform">
<p id="info">

</p>
<p>
 用户名<input type="text" name="username"/>
</p>
<p>
密  码<input type="password" name="password"/>
</p>
<p>
确认密码<input type="password" id="pased" name="passworded"/>
</p>
<p>
<input type="submit" value="提交"/>
</p>
<p>
<button id="check">检查表单</button>
</p>
</form>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery-validate.js" ></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
var validator;
$(function(){
//自定义验证方法
$.validator.addMethod("tel"function(value,element,params){
var reg=/^[0-9]{11}$/;
//element没有值的时候直接返回true 没值不验证 用reg校验value 通过返回true
return this.optional(element) || (reg.test(value));
},$.validator.format('电话{0}格式错误'));
validator=$('#demoform').validate({
debug:true,
//设置规则
rules:{
username:{
//每个规则可定义一个depends属性 定义这个规则的应用条件
required:{
depends:function(element){
//判断密码是否填写 true会校验
return $('#pased').is(':filled');
}
},
//带参数的规则设置条件
minlength:{
param:2,
depends:function(element){
return false;
}
},
maxlength:10
//email:true,//校验Email
//url:true,//校验合法url地址
//min:1,//数字最小值
//max:10,数字最大值
//range:[3,10] //值范围
//date:true//校验是否为有效日期 被Date.parse所识别 范围很宽泛 Nov/11/30 2011-/1-/11T11:/11:/11
//dateISO:true//标准格式日期校验 yyyy-/mm-/dd hh:ii:ss
//remote:'remote.php'
},
password:{
required:true,
rangelength:[5,16],//长度范围
// minlength:5,
// maxlength:16,
//number:true//必须是个numder -11.1
//digits:true//必须是个整数 11
// remote:{
// url:'remote.php',
// type:'post',
// data:{
// logintime:function(){
// return + new Date;
// }
// }
// }
},
passworded:{
tel:'自定义参数'
equalTo:'#pased'
}
},
//错误提示信息
messages:{
username:{
required:'用户名不能为空',
minlength:'2位',
maxlength:'10位',
remote:'用户名不存在'
},
password:{
required:'密码不能为空',
minlength:'5位',
maxlength:'16位',
remote:'密码重复'
},
passworded:{
equalTo:'密码不相同'
}
},
//validata方法配置项
//submitHangler 通过验证后给表单添加方法
//form 表单的dom对象
//event 事件对象
submitHandler:function(form){
return false;
//提交表单
//form.submit();
//$.ajax({});
},
//无效表单提交后
invalidHandler:function(event,validator){
console.log('nononono');
},
//不在校验这个元素 默认值是:hidden
ignore:'#pased',
//把一组元素校验错误信息放在一处 groups errorPlacement一般同时使用
groups:{
login:"username password passworded"
},
//设置放错误信息的位置 错误信息和错误的元素
errorPlacement:function(error,element){
error.insertBefore("#info");
},
//是否在提交时验证 默认true
onsubmit:false,
//onfocusout //获得焦点时验证
//onkeyup //敲击键盘时
//onclick //鼠标点击 一般用户 checkbox radio select
//focusInvalid//提交表单后第一个未通过校验的元素是否获得焦点
//focusCleanup//未通过验证元素获得焦点后是否移除错误信息
//指定通过和错误信息的class名 默认valid error
errorClass:'errors',
validClass:'valids',
//指定错误信息的标签 默认label
errorElement:'li',
//用什么标签包裹上边的标签
wrapper:'ul',
//把错误信息统一放在容器中
errorLabelContainer:'#info',
//指定这个容器显示还是隐藏 4个一般组合使用
errorContainer:"#info",
//显示多个元素未通过验证 一般用来自定义错误信息 错误的map=》元素和错误信息 errorlist元素信息
showErrors:function(errorMap,errorList){
//默认显示方式
this.defaultShowErrors();
},
//要校验的元素通过验证后的动作 字符串 或函数
//字符串给通过的元素的错误信息增加一个class 针对错误信息元素
success:function(label){
label.addClass('rrrrr');
},
//给未通过的元素添加去除效果 针对表单元素 一般在单项验证是触发
highlight:function(element,errorClass,validClass){
$(element).addClass(errorClass).removeClass(validClass);
$(element).fadeOut().fadeIn();
},
unhighlight:function(element,errorClass,validClass){
$(element).addClass(validClass).removeClass(errorClass);

}

});
//:blank 选择值为空的元素 :filled 选择值不为空的元素 :unchecked没被选择的元素
//绑定invalidHandler时间
$('#demoform').on("invalid-form",function(){
console.log('asdasd');
});

//<br/>
//validator对象的静态方法 不用捕获可以直接调用
$.validator.addClassRules({
txt:{
required:true,
minlength:10
}
});//添加组合提示信息 为class为txt的元素添加校验规则

$.validator.setDefaults({
debug:true
});//设置一些默认项目

var temp=$.validator.format("{0}-{1}-{2}");//格式化字符串只要用于提示语言
temp('你','我','他');//输出 :你-我-他 数组也可以
//<br/>
//validata方法会返回一个validator对象
p(validator.form());//校验表单 返回bl

validator.element("#pased");//校验元素是否有效 返回bl

validator.resetForm();//返回到页面验证前 错误信息会清除

validator.showErrors({
username:'你天错误',
password:'密码错误'
});//给元素动态添加错误信息
validator.numberOfInvalids();//返回无效元素的数量
//<br/>
// 查看 设置 删除元素的规则rules()
$('input[name=username]').rules("add",{max:2,min:1});

$('input[name=username]').rules("remove","remote max");

p($('input[name=username]').rules());//查看username 的规则
//检查表单
$('#check').click(function(){
console.log($('#demoform').valid() ? 'ok':'no');
});

})
var p=function(data){
console.log(data);
}