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

Posted 牵牛花

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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对象的主要内容，如果未能解决你的问题，请参考以下文章

jQuery学习jQuery插件的使用与写法（表单验证插件-validation）

jQuery常用插件与jQuery使用validation插件实现表单验证实例

jquery表单验证插件validation

jQuery基础学习06 jQuery表单验证插件-Validation

jquery插件，表单验证validation plugin的使用

jquery validate表单验证插件