知问前端——验证插件(二)
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(); //执行默认错误
},
});
