jQuery Validate验证框架详解

一、导入js库

<script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<%=path %>/validate/jquery.validate.min.js"></script>

<script type="text/javascript" src="<%=path %>/static/lib/jquery.validation/1.14.0/validate-methods.js"></script><!--自定义校验方法要引入的js-->

<script type="text/javascript" src="<%=path %>/static/lib/jquery.validation/1.14.0/messages_zh.js"></script> <!--提示中文信息要引入-->

注：<%=request.getContextPath() %>返回web项目的根路径。

二、默认校验规则

(1)、required:true               必输字段
(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true                  必须输入正确格式的电子邮件
(4)、url:true                    必须输入正确格式的网址
(5)、date:true                   必须输入正确格式的日期，日期校验ie6出错，慎用
(6)、dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)、number:true                 必须输入合法的数字(负数，小数)
(8)、digits:true                 必须输入整数
(9)、creditcard:true             必须输入合法的信用卡号
(10)、equalTo:"#password"        输入值必须和#password相同
(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

三  js校验代码

$(function(){

//自定义手机校验
jQuery.validator.addMethod("mobile", function(value, element) { 
var length = value.length; 
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ 
return this.optional(element) || (length == 11 && mobile.test(value)); 
}, "手机号码格式错误");

//自定义座机校验
jQuery.validator.addMethod("phone", function(value, element) { 
var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/; 
return this.optional(element) || (tel.test(value)); 
}, "电话号码格式错误");


$("#form-user").validate({
rules: {
userCode :  {
required : true
},
realName :  {
required : true
},
email :  {
email : true
},
mobile :  {
mobile : true
},
phone : {
phone : true
}
},
onkeyup:false,
focusCleanup:true,
success:"valid",
submitHandler:function(form){  
admin_save('${ctx}/user/saveOrModify', 'form-user')  
}
});
 
})