jQuery驗證添加了自定義方法和錯誤消息的插件

Question

以下是鏈接到JSFIDDLE。

你好

我正在學習JQuery驗證器插件及其API。我幾乎在那裏，但似乎找不到我喜歡實施的解決方案的堅實範例。我做了很多在線搜索，發現了點點滴滴，但沒有任何解釋得很好。

我有一個簡單的形式與這些領域：

• 名
• 姓
• 電子郵件
• 電話

目前，這些領域正在沒有驗證任何自定義方法或錯誤消息。所以如果表單提交時會彈出「required *」爲空的字段。

我想要做的就是驗證一個字段，而不僅僅是檢查它是否爲空/空。因此，例如有：

名字：

1. 字段不爲空/空
2. 字段不包含字母數字字符

電話：

1. 場不空白/空
2. 字段只包含數字c haracters

我是非常新的實現自定義驗證方法，我不知道如何顯示正確的錯誤消息根據。所以如果手機領域不是空白，但容器非數字字符，我想標記它，並顯示錯誤消息，該字段只接受數字字符。

目前，我在驗證器的消息對象中出現錯誤消息「required *」，我不知道如何在粒度級別實現錯誤消息。

對於這樣漫長的解釋，我表示歉意。如果有人能指引我走向正確的方向，我將非常感激。謝謝

這是鏈接到JSFIDDLE。

<div class="wrapper"> 

     <form id="contactForm" action="" method="post" enctype="multipart/form-data"> 
      <div class="fieldGroup"> 
      <!-- FIRST NAME --->  
       <lable for="firstname">First Name: </label> 
       <input type="text" id="firstname" name="firstname" size="25" maxlength="25" > 
      </div> 
      <!-- LAST NAME --> 
      <div class="fieldGroup"> 
       <lable for="lastname">Last Name: </label> 
       <input type="text" id="lastname" name="lastname" size="25" maxlength="25" > 
      </div> 
      <!-- EMAIL -->  
      <div class="fieldGroup"> 
       <lable for="email">Email: </label> 
       <input type="text" id="email" name="email" size="25" maxlength="40" >  
      </div> 
      <!-- PHONE -->  
      <div class="fieldGroup"> 
       <lable for="lastname">Phone: </label> 
       <input type="text" id="phone" name="phone" size="12" maxlength="12" > 
       xxx-xxx-xxxx 
      </div>   

      <div class="fieldGroup"> 
       <input type="submit" id="SubmitBtn" value="Submit" > 
       <input type="reset" id="ResettBtn" value="Reset" >     
      </div>    

     </form> 

    </div> 

JAVASCRIPT

(function($,W,D) 
    { 
     var JQUERY4U = {}; 

     JQUERY4U.UTIL = 
     { 
      setupFormValidation: function() 
      { 
       //form validation rules 
       $("#contactForm").validate({ 
        rules: { 
         firstname: { 
          required: true, 
          chkData: true 
         }, 
         lastname: { 
          required: true, 
          minlength: 2, 
          maxlength: 15    
         }, 
         address1:{ 
          required: true, 
          minlength: 8, 
          maxlength: 30    
         }, 
         city:{ 
          required: true, 
          minlength: 8, 
          maxlength: 25   
         },     
         state:{ 
          required: true   
         }, 
         zipcode:{ 
          required: true, 
          minlength: 5, 
          maxlength: 10 
         }, 
         phone: { 
          required: true, 
          minlength: 10, 
          maxlength: 12      
         }, 
         email: 
         { 
          required: true, 
          email: true 
         }     
        }, 
        messages: { 
         firstname: "required *", 
         lastname: "required *", 
         address1: "required *", 
         city: "required *", 
         state: "required *", 
         zipcode: "required *", 
         phone: "required *", 
         email: "required *", 
        }, 
        submitHandler: function(form) { 
         form.submit(); 
        } 
       }); 
      } 


     } 

     //when the dom has loaded setup form validation rules 
     $(D).ready(function($) { 

       $.validator.addMethod("chkData", 
       function(value, element){ 
        alert(value); 
       },"SORRY"); 
      JQUERY4U.UTIL.setupFormValidation(); 
     }); 

    })(jQuery, window, document); 

Answer 1

你的代碼稍微複雜得多，它需要的是。

$(document).ready(function() { 

    $("#contactForm").validate({ 
     rules: { 
      firstname: { 
       required: true, 
       alphanumeric: true 
      }, 
      lastname: { 
       required: true, 
       minlength: 2, 
       maxlength: 15 
      }, 
      address1: { 
       required: true, 
       minlength: 8, 
       maxlength: 30 
      }, 
      city: { 
       required: true, 
       minlength: 8, 
       maxlength: 25 
      }, 
      state: { 
       required: true 
      }, 
      zipcode: { 
       required: true, 
       minlength: 5, 
       maxlength: 10 
      }, 
      phone: { 
       required: true, 
       phoneUS: true 
      }, 
      email: { 
       required: true, 
       email: true 
      } 
     }, 
     messages: { 
      firstname: { 
       required: "required *", 
       alphanumeric: "custom alphanumeric message" 
      }, 
      lastname: "required *", 
      address1: "required *", 
      city: "required *", 
      state: "required *", 
      zipcode: "required *", 
      phone: "required *", 
      email: "required *", 
     } 
    }); 

}); 

DEMO：http://jsfiddle.net/7uDXQ/

NOTES：

1）alphanumeric和phoneUS規則要求列入additional-methods.js file的。

2）

「目前，我對驗證程序的messages 對象中的錯誤消息required *和，我不知道如何實現對錯誤粒度級別 的消息。」

自定義消息只是按照相似的格式來實現你的rules:：

messages: { 
    firstname: { 
     required: "custom required *", 
     alphanumeric: "custom alphanumeric message" 
    }, 
} 

否則，如果只做到這一點...

messages: { 
    firstname: "custom required *", 
} 

然後所有的消息全部規則firstname字段將共享相同的自定義消息。

3）您不必指定submitHandler回調函數，除非你需要做一些有效的形式，如ajax。否則，默認情況下，表單只會在有效表單上執行正常的submit。將我的jsFiddle中的代碼與我上面發佈的代碼進行比較。

4）沒有像chkData這樣的規則，所以我刪除了它。如果這是您的自定義規則，請按照上述第2項應用您的自定義消息。