学习要点:
1.使用validate.js插件
2.默认验证规则
3.validate()方法和选项
1.使用validate.js插件
2.默认验证规则
3.validate()方法和选项
4.validate.js其他功能
验证插件(validate.js),是一款验证常规表单数据合法性的插件。使用它,极大的解放了表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验。
一、使用validate.js插件
官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation
最重要的文件是validate.js,还有两个可选的辅助文件:additional-method.js(控件方式)和message_zh.js(提示汉化)文件(实际使用,请使用min压缩版)。
官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation
最重要的文件是validate.js,还有两个可选的辅助文件:additional-method.js(控件方式)和message_zh.js(提示汉化)文件(实际使用,请使用min压缩版)。
第一步:引入validate.js
<script type="text/javascript" src="js/jquery.validate.js"></script>
第二步:在JS文件中执行
$("#reg").validate();
<script type="text/javascript" src="js/jquery.validate.js"></script>
第二步:在JS文件中执行
$("#reg").validate();
二、默认验证规则
validate.js的默认验证规则的写法有两种形式:1.控件属性方式;2.JS键值对传参方式。
validate.js的默认验证规则的写法有两种形式:1.控件属性方式;2.JS键值对传参方式。
默认规则列表
规则名:required:true,说明:必须输入字段
规则名:email:true,说明:必须输入正确格式的电子邮件
规则名:url:true,说明:必须输入正确格式的网址
规则名:date:true,说明:必须输入正确格式的日期(IE6验证出错)
规则名:dateISO:true,说明:必须输入正确格式的日期(ISO)(只验证格式,不验证有效)
规则名:number:true,说明:必须输入合法的数字(负数,小数)
规则名:digits:true,说明:必须输入正整数
规则名:creditcard:true,说明:必须输入合法的信用卡号
规则名:equalTo:"#field",说明:输入值必须和#field相同
规则名:required:true,说明:必须输入字段
规则名:email:true,说明:必须输入正确格式的电子邮件
规则名:url:true,说明:必须输入正确格式的网址
规则名:date:true,说明:必须输入正确格式的日期(IE6验证出错)
规则名:dateISO:true,说明:必须输入正确格式的日期(ISO)(只验证格式,不验证有效)
规则名:number:true,说明:必须输入合法的数字(负数,小数)
规则名:digits:true,说明:必须输入正整数
规则名:creditcard:true,说明:必须输入合法的信用卡号
规则名:equalTo:"#field",说明:输入值必须和#field相同
规则名:minlength:5,说明:输入长度最小是5的字符串(汉字算一个字符)
规则名:maxlength:10,说明:输入长度最多是10的字符串(汉字算一个字符)
规则名:rangelength:[5,10],说明:输入长度介于5和10之间的字符串(汉字算一个字符)
规则名:range:[5,10],说明:输入值必须介于5和10之间
规则名:min:5,说明:输入值不能小于5
规则名:max:10,说明:输入值不能大于10
规则名:remote:"check.php",说明:使用ajax方法调用check.php验证输入值
规则名:maxlength:10,说明:输入长度最多是10的字符串(汉字算一个字符)
规则名:rangelength:[5,10],说明:输入长度介于5和10之间的字符串(汉字算一个字符)
规则名:range:[5,10],说明:输入值必须介于5和10之间
规则名:min:5,说明:输入值不能小于5
规则名:max:10,说明:输入值不能大于10
规则名:remote:"check.php",说明:使用ajax方法调用check.php验证输入值
//使用控件方式验证“必填和不得小于两位”
<input type="text" class="required" minlength="2" name="user" id="user" />
<input type="text" class="required" minlength="2" name="user" id="user" />
注意:默认规则里设置布尔值的,直接写到class里即可实现。如果是数字或数组区间,直接属于属性=值得方式即可。而对于错误提示是因为,可以引入中文汉化文件,或直接替换掉即可。
//使用JS对象键值对传参方式设置
$("#reg").validate({
rules:{
user:{
required:true, //只有一个规则的话
minlength:2, //直接user:"required",
},
},
messages:{
user:{
required:"账号不得为空!",
minlength:"账号不得小于2位!",
},
}
});
注意:由于第一种形式不能设置指定的错误提示信息,我们推荐使用第二种形式,第二种形式也避免HTML污染。
//所有规则演示
$("#reg").validate({
rules:{
email{
email:true,
},
url:{
url:true,
},
date:{
date:true,
},
dateISO:{
dateISO:true,
},
number:{
number:true,
},
digits:{
digits:true,
},
creditcard:{
creditcard:true,
},
notpass:{
equalTo:"#pass",
},
min:{
min:5,
},
range:{
range:[5,10],
},
rangelength:{
rangelength:[5,10],
},
},
message:{.....}
});
三、validate()的方法和选项
除了默认的验证规则外,validate.js还提供了大量的其他属性和方法供开发者使用。比如,调试属性,错误提示位置一系列比较有用的选项。
//jquery.format格式化错误提示
除了默认的验证规则外,validate.js还提供了大量的其他属性和方法供开发者使用。比如,调试属性,错误提示位置一系列比较有用的选项。
//jquery.format格式化错误提示
$("#reg").validate({
rules:{
user:{
required:true,
minlength:5,
rangelength:[5,10]
},
},
messages:{
user:{
required:"账号不得为空!",
minlength:jQuery.format("账号不得小于{0}位!"),
rangelength:jQuery.format("账号限制在{0}-{1}位!"),
},
},
});
//开启调试模式禁止提交
$("#reg").validate({
debug:true,
});
$("#reg").validate({
debug:true,
});
//设置调试模式为默认,可以禁止多个表单提交
$.validator.setDefaults({
debug:true,
});
$.validator.setDefaults({
debug:true,
});
//使用其他方式代替默认提交
submitHandler.function(form){
//可以执行ajax提交,并且无须debug:true阻止提交了
submitHandler.function(form){
//可以执行ajax提交,并且无须debug:true阻止提交了
//当验证成功后执行,而且阻止了默认提交使用
};
};
//忽略某个字段验证
ignore:"#pass",
ignore:"#pass",
//群组错误提示
groups:{
myerror:"user pass",
},
//显示群组的错误提示
focusInvalid:false,
errorPlacement:function(error,element){
$.each(error,function(index,value){
$(".myerror").html($(".myerror").html()+$(value).html());
})
}
//群组错误提示,分开
groups:{
error_user:"user",
error_pass:"pass"
},
//将群组的错误指定存放位置
errorPlacement:function(error,element){
error.appendTo(".myerror")
},
//设置错误提示的class名
errorClass:"error_list",
//设置错误提示的标签
errorElement:"p",
//统一包裹错误提示
errorLabelContainer:"ol.error",
wrapper:"li",
//设置成功后加载的class
success:"success",
//使用方法加载class并添加文本
success:function(label){
label.addClass("success").text("ok"),
},
//高亮显示有错误的元素,变色式
highlight:function(element,errorClass){
$(element).css("border","1px solid red");
},
//成功的元素移出错误亮度
unhighlight:function(element,errorClass){
$(element).css("border","1px solid #ccc");
},
//表单提交时获取信息
invalidHandler:function(event,validator){
var errors=validator.numberOfInvalids();
if(errors){
$(".myerror").html("您有"+errors+"个表单元素填写非法!")
}
},
//获取错误提示句柄,不用提交及时获取值
showErrors:function(errorMap,errorList){
var errors=this.numberOfInvalids();
if(errors){
$(".myerror").html("您有"+errors+"个表单元素填写非法!");
}else{
$(".myerror").hide();
}
this.defaultShowErrors(); //执行默认错误
}
//获取错误提示句柄,errorList
showErrors:function(errorMap,errorList){
alert(errorList[0].message); //得到错误信息
alert(errorList[0].element); //当前错误的表单元素
},
四.validate.js其他功能
使用remote:url,可以对表单进行ajax验证,默认会提交当前验证的值到远程地址。如果需要提交其他的值,可以使用data选项。
//使用ajax验证
//使用ajax验证
rules:{
user:{
required:true,
minlength:2,
remote:"user.php",
},
},
//user.php内容
<?php
if($_GET["user"]=="bnbbs"){
echo "false";
}else{
echo "true";
}
?>
注意:远程地址只能输出“true”或“false”,不能输出其他值。
//同时传递多个值到远程端
pass:{
required:true,
minlength:2,
remote:{
url:"user.php",
type:"POST",
dataType:"json",
data:{
user:function(){
return $("#user").val();
},
},
},
},
//user.php内容
<?php
if($_POST["user"]!="bnbbs"||
$_POST["pass"]!="123456
){
echo "false";
}else{
echo "true";
}
?>
validate.js提供了一些事件触发的默认值,这些值大部分是不用更改的。
//取消提交验证
onsubmit:false, //默认是true
注意:设置为false会导致直接系统直接提交,不会实现验证功能,一般是用于keyup/click/blur验证提交。
//取消提交验证
onsubmit:false, //默认是true
注意:设置为false会导致直接系统直接提交,不会实现验证功能,一般是用于keyup/click/blur验证提交。
//设置鼠标离开不触发验证
onfocusout:false, //默认为true
onfocusout:false, //默认为true
//设置键盘按下弹起不触发验证
onkeyup:false, //默认为true
注意:只要设置了,在测试的浏览器不管是false还是true都不触发了。
onkeyup:false, //默认为true
注意:只要设置了,在测试的浏览器不管是false还是true都不触发了。
//设置点击checkbox和radio点击不触发验证
onclick:false, //默认为true
onclick:false, //默认为true
//设置错误提示后,无法获取焦点
focusInvalid:false, //默认为true
focusInvalid:false, //默认为true
//提示错误时,隐藏错误提示,不能和focusInvalid一起用,冲突
focusClearup:true, //默认为false
focusClearup:true, //默认为false
如果表单元素设置了title值,且messages为默认,就会读取title值得错误信息,我们可以通过ignoreTitle:true,设置为true,屏蔽这一个功能。
ignoreTitle:true, //默认为false
ignoreTitle:true, //默认为false
//判断表单所验证的元素是否全部有效
alert($("#reg").valid()); //全部有效返回true
alert($("#reg").valid()); //全部有效返回true
validate.js提供了可以单独验证每个表单元素的rules方法,不但提供了add增加验证,还提供了remove删除验证的功能。
//给user增加一个表单验证
//给user增加一个表单验证
$("#reg").rules("add",{
required:true,
minlength:2,
messages:{
required:"账号不得为空!",
minlength:jQuery.format("账号不得小于{0}位!")
}
});
//删除user的所有验证规则
$("#user").rules("remove");
$("#user").rules("remove");
//删除user的指定验证规则
$("#user").rules("remove","minlength min max");
$("#user").rules("remove","minlength min max");
//添加自定义验证
$.validator.addMethod("code",function(value,element){
$.validator.addMethod("code",function(value,element){
var tel=/^[0-9]{6}$/;
return this.optional(element)||(tel.test(value));
},"请正确填写您的邮政编码");
//调用自定义验证
rules:{
code:{
required:true,
code:true,
}
},