jquery validate.addMethod Regex (自訂驗證方法)

標籤：blog   http   io   ar   使用   sp   for   on   art   

 

  項目中使用的jQuery添加的校正的方法

$(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

jquery validate.addMethod Regex (自訂驗證方法)