jquery插件-表单验证插件-validator对象
三 Validator对象
1、介绍：Validate方法返回的对象称作Validator对象
2、使用
Validator对象常用方法
Validator.form()
返回：Boolean
验证：form返回成功还是失败(整个表单)
Validator.element()
返回：Boolean
验证单个元素是成功还是失败（单个的表单元素）
Validator.resetForm()
把前面验证的Form回复到验证前的状态
Validator.showErrors()
显示特定的错误信息
Validator.numberOfInvalids()
返回验证不通过的字段数
静态方法（只要引入了Validator的js就可以直接使用，不需要再获取validator对象，通常使用来做配置的）
jQuery.validator.setDefaults()
改变默认的配置
jQuery.validator.addClassRules()
增加组合验证类型，可以在一个css类里面用多种验证规则
jQuery.validator.format()
用参数代替模板中的{n}
jQuery.validator.addMethod
添加一个新的验证方法（可以是自定义的）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
<script type="text/javascript" src="../js/validation/jquery.validate.js"></script>
<script type="text/javascript" src="../js/validation/messages_zh.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
debug:true
});
$.validator.addClassRules({
sunshengli:{
required:true,
rangelength:[3,9]
}
});
/**param1：参数似乎规则的名字
*param2：函数：验证的函数
*param2：value
*/
$.validator.addMethod('sifangku',function(value,element,args){
if (args) {
return /^[a-zA-Z_][a-zA-Z_0-9]*/.test(value);
}else
{
//不验证
return true;
}
},"这里是错误提示-对不起没有通过sifangku验证，element指的是filed对象");
$(document).ready(function()
{
var validator = $("#form1").validate({
rules: {
field1:{
required:true,
rangelength:[4,6],
sifangku:true
}
},
messages:{
field1:{
required:'field1不能为空',
rangelength:'field1的长度必须子{0}与{1}之间',
/*{0}取的是上述属性的第一个值，{1}取的是上述属性的第二个值 */
}
},
invalidHandler:function(event,validator){
console.log('对不起您有'+validator.numberOfInvalids()+"个字段没有通过验证");
}
});
$("button.form").click(function(){
console.log(validator.form());
});
$("button.element").click(function(){
console.log(validator.element('#form1 input:eq(0)'));
});
$("button.resetForm").click(function(){
validator.resetForm();
});
$("button.showErrors").click(function(){
validator.showErrors({
field1:'fieldHasError'
});
});
$("button.numberOfInvalids").click(function(){
console.log(validator.numberOfInvalids());
});
//演示$.validator.format的其他用途
var urls = [
{
url:'http://www.baidu.com',
name:'baidu'
},
{
url:'http://taobao.com',
name:"taobao"
}
];
var html="";
for(var i = 0; i < urls.length;i++)
{
html +='<br><a href='+urls[i].url+'>'+urls[i].name+'</a>';
}
$('body').append(html);
//用$.validator.format实现
var temp =$.validator.format('<br><a href={0}>{1}</a>');
var html1="";
for(var i = 0; i < urls.length;i++)
{
html1+=temp(urls[i].url,urls[i].name);
}
$('body').append(html1);
});
//模板方法，占位符
var template = $.validator.format('{0}-的-{1}');
///alert(template('小明','皮卡球'))
</script>
<style type="text/css">
form {
margin: 10px 100px 10px 100px;
}
</style>
</head>
<body>
<form >
<div>
field1:<input type="text" name="field1" />
</div>
<div>
field2:<input type="text" name="field2" class="sunshengli"/>
</div>
<div>
<input type="submit" name="submit" value="submit"/>
</div>
</form>
<button class="form">Validator.form()</button>
<button class="element">Validator.element()</button>
<button class="resetForm">Validator.resetForm()</button>
<button class="showErrors">Validator.showErrors()</button>
<button class="numberOfInvalids">Validator.numberOfInvalids()</button>
</body>
</html>
- 上一篇 »JQuery表单验证插件
- 下一篇 »判断jquery.表单验证插件是否通过验证的解决办法