您的位置：首页 > Web前端 > JQuery

jquery插件-表单验证插件-validator对象

2016-03-13 12:01 656 查看

三 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 id="form1">

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航