当前位置: 代码迷 >> Web前端 >> jquery validator 自定义印证
  详细解决方案

jquery validator 自定义印证

热度:738   发布时间:2012-10-08 19:54:56.0
jquery validator 自定义验证
$(document).ready(function(){      
  5        
  6/**//* 设置默认属性 */      
  7$.validator.setDefaults({      
  8    submitHandler: function(form) {   
  9        form.submit();   
10    }      
11});  
12 
13// 字符验证      
14jQuery.validator.addMethod("stringCheck", function(value, element) {      
15    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);      
16}, "只能包括中文字、英文字母、数字和下划线");  
17 
18// 中文字两个字节      
19jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {      
20    var length = value.length;      
21    for(var i = 0; i < value.length; i++){      
22        if(value.charCodeAt(i) > 127){      
23        length++;      
24        }      
25    }      
26    return this.optional(element) || ( length >= param[0] && length <= param[1] );      
27}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");  
28 
29// 身份证号码验证      
30jQuery.validator.addMethod("isIdCardNo", function(value, element) {      
31    return this.optional(element) || isIdCardNo(value);      
32}, "请正确输入您的身份证号码");
33    
34// 手机号码验证      
35jQuery.validator.addMethod("isMobile", function(value, element) {      
36    var length = value.length;  
37    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  
38    return this.optional(element) || (length == 11 && mobile.test(value));      
39}, "请正确填写您的手机号码");      
40    
41// 电话号码验证      
42jQuery.validator.addMethod("isTel", function(value, element) {      
43    var tel = /^\d{3,4}-?\d{7,9}$/;    //电话号码格式010-12345678  
44    return this.optional(element) || (tel.test(value));      
45}, "请正确填写您的电话号码");  
46 
47// 联系电话(手机/电话皆可)验证  
48jQuery.validator.addMethod("isPhone", function(value,element) {  
49    var length = value.length;  
50    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  
51    var tel = /^\d{3,4}-?\d{7,9}$/;  
52    return this.optional(element) || (tel.test(value) || mobile.test(value));  
53 
54}, "请正确填写您的联系电话");  
55    
56// 邮政编码验证      
57jQuery.validator.addMethod("isZipCode", function(value, element) {      
58    var tel = /^[0-9]{6}$/;      
59    return this.optional(element) || (tel.test(value));      
60}, "请正确填写您的邮政编码");   
61 
62//开始验证  
63$('#submitForm').validate({  
64    /**//* 设置验证规则 */ 
65    rules: {  
66        username: {  
67            required:true,  
68            stringCheck:true,  
69            byteRangeLength:[3,15]  
70        },  
71        email:{  
72            required:true,  
73            email:true 
74        },  
75        phone:{  
76            required:true,  
77            isPhone:true 
78        },  
79        address:{  
80            required:true,  
81            stringCheck:true,  
82            byteRangeLength:[3,100]  
83        }  
84    },  
85      
86    /**//* 设置错误信息 */ 
87    messages: {  
88        username: {      
89            required: "请填写用户名",  
90            stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",  
91            byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"      
92        },  
93        email:{  
94            required: "请输入一个Email地址",  
95            email: "请输入一个有效的Email地址" 
96        },  
97        phone:{  
98            required: "请输入您的联系电话",  
99            isPhone: "请输入一个有效的联系电话" 
100        },  
101        address:{  
102            required: "请输入您的联系地址",  
103            stringCheck: "请正确输入您的联系地址",  
104            byteRangeLength: "请详实您的联系地址以便于我们联系您" 
105        }  
106    },  
107      
108   /* 设置验证触发事件 */ 
109    focusInvalid: false,  
110    onkeyup: false,  
111      
112    /**//* 设置错误信息提示DOM */ 
113    errorPlacement: function(error, element) {      
114        error.appendTo( element.parent());      
115    },    
116      
117});  
118 
119});





supplier-commons-vacation.js



//定义订单的公共的函数方法
function define_common_method(){

    //设置默认的操作
     $.validator.setDefaults({   
     submitHandler: function(form) { form.submit(); }   
        });
  
     //添加自定义校验函数
     $.validator.addMethod("charNo",function(value,element) {   
    var length = value.length; 
    var your_tel =/[\W]/g;
    return this.optional(element) || (length<=8&&!your_tel.test(value));  
  },"请输入英文字符或数字!");
 
  //添加验证操作名称的校验函数
  $.validator.addMethod("charString",function(value,element) {   
      var length = value.length; 
      var your_tel =/[^\a-zA-Z\u4E00-\u9FA5]/g;
      var your_tel2=/^[A-Za-z]*$/;
      return this.optional(element) || (length<=20&&!your_tel.test(value));  
  },"请输入中文或英文名称");
 
  //验证手机号码(仅仅13和15开头)
  $.validator.addMethod("isPhone", function(value,element) {  
           var length = value.length;  
        var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  
         var tel = /^\d{3,4}-?\d{7,9}$/;  
        return this.optional(element) || (tel.test(value) || mobile.test(value));  
         }, "请正确填写您的联系电话或者手机");  
 
}





supplier-finance.js

jQuery(function($) {

//绑定所有的事件
$(document).ready(function() {
  bind_component_event();
});


//绑定的公共的事件
function bind_component_event() {
    //定义一些公共的方法
    define_common_method();
 
    //环游供应商付款的验证(度假) 
    bind_checkCondition_component_event();
   
   
    //环游供应商付款验证的(供应商)
    bind_supplierConditionForm_component_event();
}

//环游供应商付款(度假)的验证 
function bind_checkCondition_component_event() {
 
  //待收款款订单验证
  $("#checkConditionForm").validate({
   event: "submit",
   errorPlacement: function(error, element) {
   },
   rules:{
     "searchCon.accountNo":{
      charNo:true
     },
     "searchCon.supplierName":{
      charString:true
     }
    },
    messages:{
     "searchCon.accountNo":{
        charNo:"请输入正确的对账编号!"
       },
       "searchCon.supplierName":{
        charString:"请输入正确的供应商名称!"
       }
    },
   
    //设置验证触发事件
   focusInvalid:false,
   onkeyup:false,
           
         //设置错误信息提示DOM   
   errorPlacement:function(error,element){
      error.appendTo(element.parent());
   }
   
   
  });
}
//环游供应商付款的验证(供应商) 
function bind_supplierConditionForm_component_event() {
 
  //待收款款订单验证
  $("#supplierConditionForm").validate({
   event: "submit",
   errorPlacement: function(error, element) {
   },
   rules:{
     "searchCon.accountNo":{
      charNo:true
     },
     "searchCon.supplierName":{
      charString:true
     }
    },
    messages:{
     "searchCon.accountNo":{
        charNo:"请输入正确的对账编号!"
       },
       "searchCon.supplierName":{
        charString:"请输入正确的供应商名称!"
       }
    },
   
    //设置验证触发事件
   focusInvalid:false,
   onkeyup:false,
           
         //设置错误信息提示DOM   
   errorPlacement:function(error,element){
      error.appendTo(element.parent());
   }
  });
}

});





关于jQuery的校验的API



http://docs.jquery.com/Plugins/Validation/Validator/addMethod




http://www.shopxx.net/html/news/2009/1201/59.html

http://jquery.bassistance.de/api-browser/plugins.html

  相关解决方案