知问前端——验证插件(二)

validate()的方法和选项

除了默认的验证规则外，jquery.validate.js还提供了大量的其他属性和方法供开发者使用，比如调试属性，错误提示位置一系列比较有用的选项。

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知问前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <form id="reg" action="123.html">
        <p class="myerror"></p>
        <p>账号：<input type="text" name="user" /></p>
        <p>密码：<input type="text" name="pass" id="pass" /></p>
        <p><input type="submit" value="提交" /></p>
    </form>
</body>
</html>

jQuery代码：

$(function() {
    $("#reg").validate({
        rules:{
            user:{
                required:true,
                minlength:2,
                //rangelength:[5,10]
            },
            pass:{
                required:true,
                minlength:6
            }
        },
        messages:{
            user:{
                required:"账号不得为空！",
                minlength:"账号不得小于{0}位！",
                //minlength:jQuery.format("账号不得小于{0}位！")  //加了之后反而丧失作用
                //minlength:$.format("账号不得小于{0}位！") //同上
                //rangelength:"帐号限制在{0}-{1}位！"
            },
            pass:{
                required:"密码不得为空！",
                minlength:"密码不得小于{0}位！"
            }
        }
    });
});

开启调试模式禁止提交：

$('#reg').validate({
    debug : true
});

设置调试模式为默认，可以禁止多个表单提交：

//设置调试模式为默认，可以禁止多个表单提交，
//所有默认行为都可以在这里设置
$.validator.setDefaults({
    debug:true
});

使用其他方式代替默认提交：

$(function() {
    $("#reg").validate({
　　　　 //使用其他方式代替默认提交
        submitHandler:function(form) {
            //可以执行ajax提交，并且无须debug:true阻止提交了
            //alert(form); // [object HTMLFormElement]
            
            //当验证成功后执行，而且阻止了默认提交
            //一般用于ajax提交使用
            
            //$(".myerror").hide();

            alert("验证成功，准备提交！");
        }
    });
});

忽略某个字段验证：

$('#reg').validate({
    ignore:"#pass"
});

群组错误提示：

$('#reg').validate({
    groups:{
    　　myerror:"user pass"
    }
});

显示群组的错误提示：

$('#reg').validate({
    focusInvalid:false, //使得第一次表单提交之后，焦点不在第一个input控件上
    //error是user、pass两个错误对象，element是<input>控件的DOM对象
    errorPlacement:function(error,element) {
    //alert(element[0]); //[object HTMLInputElement]
    //alert(error); //[object Object]
    　　$.each(error, function(index,value) {
        　　//alert(index + " " + value); //0 [object HTMLLabelElement]
        　　//alert(index + " " + $(value).html());
        　　$(".myerror").html($(".myerror").html() + $(value).html());
    　　});
    }
});

群组错误提示，分开：

$('#reg').validate({
    groups:{
    　　error_user:"user",
    　　error_pass:"pass"
    }
});

将群组的错误指定存放位置：

$('#reg').validate({
    errorPlacement:function(error,element) {
    　　error.appendTo(".myerror");
    }
});

设置错误提示的class名以及设置错误提示的标签：

$('#reg').validate({
    errorPlacement:function(error,element) {
    　　error.appendTo(".myerror");
    },
    //设置错误提示的class名
    errorClass:"abc", //默认为error
    //设置错误提示的标签
    errorElement:"p", //默认是<label>标签包裹
});

将index.html的<p class="myerror"></p>修改为：<ol class="myerror"></ol>

$('#reg').validate({
    errorPlacement:function(error,element) {
    　　error.appendTo(".myerror");
    },
    //统一包裹错误提示
    errorLabelContainer:"ol.myerror",
    wrapper:"li"
});

设置成功后加载的class以及使用方法加载class并添加文本：

style.css：

.valid {
    background: url(img/reg_succ.png) no-repeat right;
}
.abc {
    border: 5px solid green;
}

jQuery代码如下：

$('#reg').validate({
    //加载成功后，<input>控件后的<label>控件加载class
    success:"abc", //成功后加载(即输入正确后)，<input>控件的class默认为valid
    //使用方法加载class并添加文本
    success:function(label) {
    label.addClass("abc").text("ok");
    }
});

高亮显示有错误的元素，变色式：

$('#reg').validate({
    //高亮显示有错误的元素，变色式
    highlight:function(element, errorClass) {
    　　$(element).css("border","1px solid red");
    },
    //恢复默认
    unhighlight:function(element, errorClass) {
    　　$(element).css("border","1px solid #ccc");
    }
});

表单提交时获取信息：

$("#reg").validate({
    //使用其他方式代替默认提交
    submitHandler:function(form) {
        //可以执行ajax提交，并且无须debug:true阻止提交了
        //alert(form); // [object HTMLFormElement]
        
        //当验证成功后执行，而且阻止了默认提交
        //一般用于ajax提交使用

        $(".myerror").hide();

        alert("验证成功，准备提交！");
    },
    //有错误的时候才执行，一旦没有错误就不会执行了
    invalidHandler:function(event, validator) {
        //alert(validator.numberOfInvalids()); //2条错误信息
        
        var error = validator.numberOfInvalids();
        if(error) {
            $(".myerror").html("您有"+error+"条错误信息！");
        }
        //if(error == 0) $(".myerror").hide(); //错误，不能这样来判断    
    }
});

获取错误提示句柄，不用提交及时获取值，达到的效果同上：

$("#reg").validate({
    //使用其他方式代替默认提交
    submitHandler:function(form) {
        //可以执行ajax提交，并且无须debug:true阻止提交了
        //alert(form); // [object HTMLFormElement]
        
        //当验证成功后执行，而且阻止了默认提交
        //一般用于ajax提交使用
        alert("验证成功，准备提交！");
    },
    showErrors:function(errorMap, errorList) {
        //alert("123");
        //alert(errorMap); //[object Object]
        //$.each(errorMap, function(index, value) {
            //alert(index + " " + value); //user 账号不得为空！
        //});
        //alert(errorMap.user);
        //alert(errorList[0].element); //[object HTMLInputElement]，当前错误的表单元素
        //alert(errorList[0].message); //当前错误的表单元素
        var error = this.numberOfInvalids();
        //alert(error);
        if(error) {
            $(".myerror").html("您有"+error+"条错误信息！");
        } else {
            $(".myerror").hide();
        }
        this.defaultShowErrors(); //执行默认错误
    },
});