使用表單驗證插件時遇到問題

Question

我試圖使用這個jQuery插件http://bassistance.de/jquery-plugins/jquery-plugin-validation，這樣我就可以驗證我正在創建的表單。但它似乎並沒有驗證手機領域。任何人都可以幫助我理解我做錯了什麼？

這是到目前爲止我的代碼

<script type="text/javascript"> 
var validator 
jQuery(document).ready(function() { 
    validator = jQuery("#participateform").validate(); 
}); 

function sendRequest(){ 
     var validform=validator.form();  
     if(validform) 
     { 
      alert("Form is valid"); 
     } 
} 
</script> 

<form id="participateform" > 
    <div class="table"> 
     <div class="tr"> 
      <div class="td">fullname</div> 
      <div class="td"> 
       <input type="text" value="" id="fullname" name="fullname" class="required" /> 
      </div> 
     </div> 
     <div class="tr"> 
      <div class="td">your e-mail </div> 
      <div class="td"> 
       <input type="text" value="" id="e-mail" name="e-mail" class="required email" /> 
      </div> 
     </div> 
     <div class="tr"> 
      <div class="td">area</div> 
      <div class="td"> 
       <select id="area" name="area"></select> 
      </div> 
     </div> 
     <div class="tr"> 
      <div class="td">Phone 1</div> 
      <div class="td"> 
       <input type="text" value="" id="phone" name="phone" class="required phone"/>     
      </div> 
     </div> 
     <div class="tr"> 
      <div class="td">Phone 1</div> 
      <div class="td"> 
       <input type="text" value="" id="phone2" name="phone2" /> 
      </div> 
     </div> 

    </div> 

    <input type="button" id="btnsubmit" value="submit" onclick="sendRequest()"> 
</form> 

Answer 1

的源代碼庫顯示，該庫使用下面的驗證規則電話：

jQuery.validator.addMethod("phoneUS", function(phone_number, element) { 
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 && 
     phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); 
}, "Please specify a valid phone number"); 

jQuery.validator.addMethod('phoneUK', function(phone_number, element) { 
    phone_number = phone_number.replace(/\s+|-/g,''); 
    return this.optional(element) || phone_number.length > 9 && 
     phone_number.match(/^(\(?(0|\+44)[1-9]{1}\d{1,4}?\)?\s?\d{3,4}\s?\d{3,4})$/); 
}, 'Please specify a valid phone number'); 

jQuery.validator.addMethod('mobileUK', function(phone_number, element) { 
    phone_number = phone_number.replace(/\s+|-/g,''); 
    return this.optional(element) || phone_number.length > 9 && 
     phone_number.match(/^((0|\+44)7(0|4|5|6|7|8|9){1}\d{2}\s?\d{6})$/); 
}, 'Please specify a valid mobile number'); 

//Matches UK landline + mobile, accepting only 01-3 for landline or 07 for mobile to exclude many premium numbers 
jQuery.validator.addMethod('phonesUK', function(phone_number, element) { 
    phone_number = phone_number.replace(/\s+|-/g,''); 
    return this.optional(element) || phone_number.length > 9 && 
     phone_number.match(/^(0[1-3]{1}[0-9]{8,9})$/) || phone_number.match(/^(07[5-9]{1}[0-9]{7,8})$/); 
}, 'Please specify a valid uk phone number'); 

所以不是這樣：

<input type="text" value="" id="phone" name="phone" class="required phone"/> 

試試這個美國電話號碼：

<input type="text" value="" id="phone" name="phone" class="required phoneUS"/> 

或者，這對於英國電話號碼：

<input type="text" value="" id="phone" name="phone" class="required phoneUK"/> 

OR這對於英國的移動電話號碼

<input type="text" value="" id="phone" name="phone" class="required mobileUK"/> 

Answer 2

是什麼樣的驗證失敗的電話嗎？

快速查看source code令手機缺乏作爲驗證類。

編輯

您需要添加自定義規則：

$(document).ready(function(){ 

    $.validator.addMethod("phone", function(value, element) { 
    //Any code that will return TRUE or FALSE 
    return /^(\d+){10}$/.test(value); 
    }, 
    "Error message"); 

}); 

Answer 3

嘗試lookk here，看來你應該使用其他內置的驗證方法，如digits()或phoneUS()

Answer 4

如上所述，手機沒有驗證。你可以使用jQuery.validator.addMethod（）來定義你自己的（甚至通過正則表達式或者你想要的），它是有據可查的。

也看到這一點： http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js