jQuery validate方法详解

在做项目的时候,往往会遇到需要对页面的上得某个值进行验证,而这个验证并不是常用的,需要用自己定义的规则来验证。这样的话,就可以使用jquery的自定义验证方法了。

下面我先说一下自定义验证的基本格式:
  

[javascript]  view plain copy
  1. "text/javascript">  
  2.         jQuery.validator.addMethod("regex",  //addMethod第1个参数:方法名称  
  3.         function(value, element, params) {     //addMethod第2个参数:验证方法,参数(被验证元素的值,被验证元素,参数)  
  4.             var exp = new RegExp(params);     //实例化正则对象,参数为传入的正则表达式  
  5.             return exp.test(value);                    //测试是否匹配  
  6.         },  
  7.         "格式错误");    //addMethod第3个参数:默认错误信息  
  8.         $(function() {  
  9.             $("#signupForm").validate(  
  10.   
  11.             {  
  12.             rules: {  
  13.                 txtPassword1: "required",  //密码1必填  
  14.   
  15.                 txtPassword2: {    //密码2的描述多于1项使用对象类型  
  16.                     required: true,  //必填,这里可以是一个匿名方法  
  17.                     equalTo: "#txtPassword1",  //必须与密码1相等  
  18.                     rangelength: [5, 10],    //长度5-10之间  
  19.                     regex: "^\\w+$"          //使用自定义的验证规则,在上例中新增的部分  
  20.                 },  
  21.   
  22.                 txtEmail: "email"   //电子邮箱必须合法  
  23.             },  
  24.             messages: {  
  25.                 txtPassword1: "您必须填写",  
  26.   
  27.                 txtPassword2: {  
  28.                     required: "您必须填写",  
  29.                     equalTo: "密码不一致",  
  30.                     rangelength: "长度必须介于{0} 和 {1} 之间的字符串",  
  31.                     regex: "密码只能是数字、字母与下划线"  
  32.                 }  
  33.             },  
  34.             debug: false,  //如果修改为true则表单不会提交  
  35.             submitHandler: function() {  
  36.                 alert("开始提交了");  
  37.             }  
  38.         });  
  39.     });  
  40.       

  以下是整理的自定义验证的方法:

[javascript]  view plain copy
  1. // 手机号码验证  
  2. jQuery.validator.addMethod("mobile"function(value, element) {  
  3.     var length = value.length;  
  4.     var mobile =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/  
  5.     return this.optional(element) || (length == 11 && mobile.test(value));  
  6. }, "手机号码格式错误");    
  7.   
  8. // 电话号码验证    
  9. jQuery.validator.addMethod("phone"function(value, element) {  
  10.     var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;  
  11.     return this.optional(element) || (tel.test(value));  
  12. }, "电话号码格式错误");  
  13.   
  14. // 邮政编码验证    
  15. jQuery.validator.addMethod("zipCode"function(value, element) {  
  16.     var tel = /^[0-9]{6}$/;  
  17.     return this.optional(element) || (tel.test(value));  
  18. }, "邮政编码格式错误");  
  19.   
  20. // QQ号码验证    
  21. jQuery.validator.addMethod("qq"function(value, element) {  
  22.     var tel = /^[1-9]\d{4,9}$/;  
  23.     return this.optional(element) || (tel.test(value));  
  24. }, "qq号码格式错误");  
  25.   
  26. // IP地址验证  
  27. jQuery.validator.addMethod("ip"function(value, element) {  
  28.     var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;  
  29.     return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));  
  30. }, "Ip地址格式错误");  
  31.   
  32. // 字母和数字的验证  
  33. jQuery.validator.addMethod("chrnum"function(value, element) {  
  34.     var chrnum = /^([a-zA-Z0-9]+)$/;  
  35.     return this.optional(element) || (chrnum.test(value));  
  36. }, "只能输入数字和字母(字符A-Z, a-z, 0-9)");  
  37.   
  38. // 中文的验证  
  39. jQuery.validator.addMethod("chinese"function(value, element) {  
  40.     var chinese = /^[\u4e00-\u9fa5]+$/;  
  41.     return this.optional(element) || (chinese.test(value));  
  42. }, "只能输入中文");  
  43.   
  44. // 下拉框验证  
  45. $.validator.addMethod("selectNone"function(value, element) {  
  46.     return value == "请选择";  
  47. }, "必须选择一项");  
  48.   
  49. // 字节长度验证  
  50. jQuery.validator.addMethod("byteRangeLength"function(value, element, param) {  
  51.     var length = value.length;  
  52.     for (var i = 0; i < value.length; i++) {  
  53.         if (value.charCodeAt(i) > 127) {  
  54.             length++;  
  55.         }  
  56.     }  
  57.     return this.optional(element) || (length >= param[0] && length <= param[1]);  
  58. }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));  希望大家多多学习jquery。这是非常有用的。

你可能感兴趣的:(javascript,Java,EE,jQuery)