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')
 
}
});
 

})