2. 程式人生 > >jquery validate.addMethod 正則表示式 (自定義驗證方法)

jquery validate.addMethod 正則表示式 (自定義驗證方法)

阿新 • • 發佈：2019-02-03


  專案中使用的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新增的校驗的方法

$(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: "請輸入您的聯絡地址", 

相關推薦

jquery validate.addMethod 正則表示式 (自定義驗證方法)

  專案中使用的jQuery新增的校驗的方法 $(document).ready(function(){         5           6/* 設定預設屬性 */         7$.validator.setDefaults({         8    

jquery validate 自定義驗證方法 addMethod

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Jquery Validate 預設校驗規則、jQuery.validator.addMethod自定義驗證方法---例子

  一、Jquery Validate 預設校驗規則 (1)、required:true 必輸欄位 (2)、remote:"remote-valid.jsp" 使用ajax方法呼叫remote-valid.jsp驗證輸入值 (3)、email:tru

JQuery Validate插件如何自定義驗證方法（結合ajax實現數據庫的查重）

JQuery概述 本文介紹Validate自定義表單校驗方式。Validate插件雖然提供了豐富的驗證規則，但在很多時候仍然很難滿足我們的開發需求，在註冊頁面我們需要通過ajax驗證用戶輸入的用戶名是否已經被他人註冊，那此時通過傳統的Validate驗證方式已經無法滿足需求了！ 我們可以通過自

Jquery中的正則表示式

正則表示式 使用正則表示式的test()方法進行匹配驗證，引數為待匹配串。 字串匹配公式 格式：/^相關公式$/ 常用 字元 描述 \ 將下一個字元標記為

詳解jQuery選擇器正則表示式

1、空白 // Whitespace characters http://www.w3.org/TR/css3-selectors/#whitespace whitespace = "[\\x20\\t\\r\\n\\f]", 在字串中，斜槓是用於轉義的，若想輸出斜槓，

jQuery.validator.addMethod 自定義驗證方法

1.$.validator.addMethod 方法自定義驗證介紹 該方法可用於我們平時給<input type=" "> 指定type時使用，目的就是可以讓我們自己定義想要驗證的方法，好玩性很高，可以自定義一些通用的驗證，比如手機號碼、身份證等。 2.介紹引數和用法 方法：$.valida

jQuery中運用正則表示式驗證輸入是否有特殊字元

 //驗證是否有特殊字元 function checkval(t) {     var re = /^[\u4e00-\u9fa5a-z]+$/gi;//只能輸入漢字和英文字母     if (re.test(t)) {         return true;     }

jquery.validate 自定義驗證方法提交問題

需要引入jquery.form.js 自定義方法： // 匹配english jQuery.validator.addMethod(“isEnglish”, function(value, element) { return th

jQuery validate 動態修改自定義驗證方法的提示訊息

    有時後提示資訊要在執行了驗證方法的回撥之後才能確定該顯示什麼樣的資訊，這個時候用如下方法就不能達到要求：          $.addMethod('customFun',function(value, element, param){ console.l

JavaScript正則表示式表單驗證例項

/*是否帶有小數*/ function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } /*校驗是否中文名稱組成 */ function

正則表示式中常用字串方法

1，search()用於檢索字串中指定的子字串，或檢索與正則表示式相匹配的子字串，並返回子串的起始位置。search()方法不支援全域性搜尋，因為會忽略正則表示式引數的標識g，並且也忽略了regexp的lastIndex屬性，總是從字串的開始位置進行檢索，所以它會總是返回str的第一個匹配的位置。 &n

讓你的正則表示式技能提升的方法 持續更新

練習網址：https://alf.nu/RegexGolf 有喜歡正則表示式的朋友可以一起學習。。。 明確指定字串匹配 只輸入一個確定的字串，那麼將會完全匹配該字串 結尾匹配 以啥結尾，k$即以k結尾的字串 另一種方法以什麼結尾匹配 \b表示非字母或

關於validate如何使用自定義驗證方法,以及一些基本的操作

首頁我們先匯入validate外掛(也要匯入jQuery外掛哦!) $("#form-data")為form表單上的ID,而rules為驗證規則,messages則是相應的提示資訊 一.KaTeX parse error: Expected 'EOF',

正則表示式-郵箱有效性驗證

條件： @之前必須有內容且只能是字母（大小寫）、數字、下劃線(_)、減號（-）、點（.） @和最後一個點（.）之間必須有內容且只能是字母（大小寫）、數字、點（.）、減號（-），且兩個點不能挨著 最後一個點（.）之後必須有內容且內容只能是字母（大小寫）、數字且長度

IP地址正則表示式，帶*驗證

IP地址正則表示式，在網上找了很多，但是沒有看到帶 ‘ * ’ 的正則表示式，通常我們在設定IP時，會設定IP段（0-255）或者用 ‘ * ’ 代替。  1、下為不帶 ‘ * ’ 的正則表示式 var checkName = /^(?:(?:1[0-9][0-9]\.)|

JS正則表示式中常用的方法

正則常用的符號知識點 限定符 * 表示前面的表示式出現0次到多次{0,} + 表示前面的表示式出現一次到多次{1,} ？ 最少0次，最多一次（可以阻止貪婪模式）{0,1} {} 更加明確的表示前面的表示式出現的次數 其它 . 表示的是除

正則表示式-身份證號碼驗證

身份證號碼驗證 1.第一代身份證15位： /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/ 例： if (sfzhmcode.length == 15 &&

javascript正則表示式(6)——字串物件方法

String.protatype.search(reg) 1.search()方法用於檢索字串中指定的子字串，或檢索與正則表示式相匹配的子字串 2.方法返回第一個匹配結果index,查詢不到返回-1 3.search()方法不執行全域性匹配，它將忽略標誌g，並且總是從字串的

js正則表示式在（replace()方法）

有字串var=’abc455efgabcab’ 去掉字串中的a、b、c字元，形成結果345efg <script type="text/javascript"> var str='abc345efgabcab';