EasyValidator实现的功能:
1.提示功能(在表单或者其他标签中加入tip="想提示的文字")
如:
2. 普通表单验证(在表单中加入reg="正则表达式")
如: <input name="username" reg="正则" />
<input name="name" tip="请输入你的名字哟~">
3. AJAX表单验证(在表单中加入url="验证系统地址")
如: <input name="username" url="地址" />
4. 普通表单验证 + AJAX表单验证 (普通验证通过以后,再进行AJAX验证)
如: <input name="username" reg="正则" url="地址" />
5. 扩展函数表单验证
比如自定义验证规则:
<input name="u" type="password" id="pwd2" reg="^\w{6,20}$" tip="6-20个字符,请确认两次密码输入相同"/> </td>
var isExtendsValidate = true; //如果要试用扩展表单验证的话,该属性一定要申明
function extendsValidate(){ //函数名称,固定写法
//密码匹配验证
if( $('#pwd1').val() == $('#pwd2').val() ){ //匹配成功
$('#pwd2').validate_callback(null,"sucess"); //此次是官方提供的,用来消除以前错误的提示
}else{//匹配失败
$('#pwd2').validate_callback("密码不匹配","failed"); //此处是官方提供的API,效果则是当匹配不成功,pwd2表单 显示红色标注,并且TIP显示为“密码不匹配”
return false;
}
//如果觉得官方提供的错误提示UI API 过于复杂,完全可以选择自定义,可以试试下面注释掉的代码
//if( $('#pwd1').val() != $('#pwd2').val() ){ //匹配不成功
//alert("密码不匹配");
//return false;
//}
//checkbox 验证,必须选择一个checkbox
if($("[name='lover']:checked").length < 1){
alert("必须得有一个lover!");
return false;
}
}
validate
一. jquery.validate.js是jquery下的一个验证插件,功能比较强大
Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:
内置的验证规则,如:必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则
可以自定义验证规则:可以很方便地自定义验证规则
简单而且强大的验证信息提示:没人了验证信息提示,并提供自定义覆盖默认提示信息功能
实时进行验证的功能.:通过blur和keyup时间来触发验证规则
二、默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
三使用:
1.加载文件
<script type="text/javascript" src="jquery1.10.2.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="messages_zh.js"></script>
2.构建表单
<form id="myform" >
<input id="cusername" name="username" size="25" class="required" minlength="2" />
<input id="cemail" name="email" size="25" class="required email" />
<input id="pwd" name="email" size="25" class="required" rangelength='5,10' />
注意: 多个参数之间使用空格分隔。
如果验证规则有参数:
</form>
3.调用:
<script type="text/javascript">
$(document).ready(function() {
$("你的form表单id").validate();
});
</script>
4.改变错误提示的样式:
在css里面
label.error{
margin-left: 10px;
color: red;
}
5. 指定错误显示容器:
在validate()里面添加属性
$("你的form表单id").validate({
errorElement : "span" //用来创建错误提示信息标签(可自定义)
});
注意: 如果有其他属性也可以添加到{} 里面,多个属性之间使用 , 分隔,最后一个不打 ,
6.验证的另外一种方式: 实现html 与验证规则分离
$("#signupForm").validate({
rules:{
在rules里面写验证规则,多个验证规则之间使用,分隔,最后一个规则不打,
inputName: { 规则1,规则2 },
inputName: { 规则1,规则2 }
} ,
messages: {
你的提示信息
inputName: { 规则名 : "提示信息" ,规则名 : "提示信息" }
}
})
7.其他常用属性
Success : function(label){ //验证成功后执行的回调函数,label指向上面那个错误提 示信息标签em
label.text( ' ' ) //清空错误提示消息
. addClass("success") //添加上自定义的success类
}
再在css中给em.error 和 em.success设置样式(如背景分别为错号和对号等)
自定义验证规则
$.validator . addMethod(
"你自己的方法名", //自定义规则方法名
function(value , element , param){ /自定义规则体
return value == eval_r(param);
},
'请输入正确的数学公式计算后的结果' //提示信息
)
调用自定义的验证规则
在 rules中加入valcode :( 自定义规则方法名 : "参数")
比如:
$("#formId").validate({
rules : { //增加rules属性
username: { required : true , minlength : 2} ,
email : { required : true , email : true} ,
url : "url" ,
comment : "required" ,
valcode : (formula : "7+9") //valcode为name的值
}
})
1.提示功能(在表单或者其他标签中加入tip="想提示的文字")
如:
2. 普通表单验证(在表单中加入reg="正则表达式")
如: <input name="username" reg="正则" />
<input name="name" tip="请输入你的名字哟~">
3. AJAX表单验证(在表单中加入url="验证系统地址")
如: <input name="username" url="地址" />
4. 普通表单验证 + AJAX表单验证 (普通验证通过以后,再进行AJAX验证)
如: <input name="username" reg="正则" url="地址" />
5. 扩展函数表单验证
比如自定义验证规则:
<input name="u" type="password" id="pwd2" reg="^\w{6,20}$" tip="6-20个字符,请确认两次密码输入相同"/> </td>
var isExtendsValidate = true; //如果要试用扩展表单验证的话,该属性一定要申明
function extendsValidate(){ //函数名称,固定写法
//密码匹配验证
if( $('#pwd1').val() == $('#pwd2').val() ){ //匹配成功
$('#pwd2').validate_callback(null,"sucess"); //此次是官方提供的,用来消除以前错误的提示
}else{//匹配失败
$('#pwd2').validate_callback("密码不匹配","failed"); //此处是官方提供的API,效果则是当匹配不成功,pwd2表单 显示红色标注,并且TIP显示为“密码不匹配”
return false;
}
//如果觉得官方提供的错误提示UI API 过于复杂,完全可以选择自定义,可以试试下面注释掉的代码
//if( $('#pwd1').val() != $('#pwd2').val() ){ //匹配不成功
//alert("密码不匹配");
//return false;
//}
//checkbox 验证,必须选择一个checkbox
if($("[name='lover']:checked").length < 1){
alert("必须得有一个lover!");
return false;
}
}
validate
一. jquery.validate.js是jquery下的一个验证插件,功能比较强大
Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:
内置的验证规则,如:必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则
可以自定义验证规则:可以很方便地自定义验证规则
简单而且强大的验证信息提示:没人了验证信息提示,并提供自定义覆盖默认提示信息功能
实时进行验证的功能.:通过blur和keyup时间来触发验证规则
二、默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
三使用:
1.加载文件
<script type="text/javascript" src="jquery1.10.2.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="messages_zh.js"></script>
2.构建表单
<form id="myform" >
<input id="cusername" name="username" size="25" class="required" minlength="2" />
<input id="cemail" name="email" size="25" class="required email" />
<input id="pwd" name="email" size="25" class="required" rangelength='5,10' />
注意: 多个参数之间使用空格分隔。
如果验证规则有参数:
</form>
3.调用:
<script type="text/javascript">
$(document).ready(function() {
$("你的form表单id").validate();
});
</script>
4.改变错误提示的样式:
在css里面
label.error{
margin-left: 10px;
color: red;
}
5. 指定错误显示容器:
在validate()里面添加属性
$("你的form表单id").validate({
errorElement : "span" //用来创建错误提示信息标签(可自定义)
});
注意: 如果有其他属性也可以添加到{} 里面,多个属性之间使用 , 分隔,最后一个不打 ,
6.验证的另外一种方式: 实现html 与验证规则分离
$("#signupForm").validate({
rules:{
在rules里面写验证规则,多个验证规则之间使用,分隔,最后一个规则不打,
inputName: { 规则1,规则2 },
inputName: { 规则1,规则2 }
} ,
messages: {
你的提示信息
inputName: { 规则名 : "提示信息" ,规则名 : "提示信息" }
}
})
7.其他常用属性
Success : function(label){ //验证成功后执行的回调函数,label指向上面那个错误提 示信息标签em
label.text( ' ' ) //清空错误提示消息
. addClass("success") //添加上自定义的success类
}
再在css中给em.error 和 em.success设置样式(如背景分别为错号和对号等)
自定义验证规则
$.validator . addMethod(
"你自己的方法名", //自定义规则方法名
function(value , element , param){ /自定义规则体
return value == eval_r(param);
},
'请输入正确的数学公式计算后的结果' //提示信息
)
调用自定义的验证规则
在 rules中加入valcode :( 自定义规则方法名 : "参数")
比如:
$("#formId").validate({
rules : { //增加rules属性
username: { required : true , minlength : 2} ,
email : { required : true , email : true} ,
url : "url" ,
comment : "required" ,
valcode : (formula : "7+9") //valcode为name的值
}
})