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

    

  

上一篇:jquery插件-表单验证插件-rules


下一篇:mvc4 发布,遇到 403.14 问题,并且iis提示打开目录浏览。。。解决办法