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插件-表单验证插件-validator对象)