jQuery的驗證插件添加即使

Question

我使用的jQuery Validation Plugin不需要仍在運行的方法和我加入我自己的方法，像這樣：

jQuery.validator.addMethod("num", function(num) { 
    if(isNaN(num)) 
     return false; 

    return true; 
}, "Please enter a valid number"); 

然而，即使我沒有在required類添加到一個表單元素，如果用戶沒有輸入任何內容，這個驗證方法仍然會被調用並計算爲false。但我想這樣做的行爲是，如果一個元素沒有required類，只有在用戶輸入了某個元素時纔會調用它。無論如何要做到這一點？謝謝！

UPDATE

所以我上面貼實際的代碼本來是一個簡單的例子來說明這個問題，但是現在我忍受那是給我問題的具體例子。這裏是的jsfiddle鏈接：

http://jsfiddle.net/SVwmH/2/

的HTML

<form method="post"> 
    <li> 
     <label for="2">Mileage</label> 
     <input type="text" name="2" id="attr_2" class="non_neg_int" 
     value="" /> 
    </li> 
    <li> 
     <label for="3">VIN (Vehicle Identification Number)</label> 
     <input type="text" name="3" 
     id="attr_3" class="vin" maxlength="17" value="" /> 
    </li> 
    <li> 
     <input type="submit" /> 
    </li> 
</form> 

的JS

$(document).ready(function() { 
    var validator = $("form").validate({ 
     onkeyup: false, 
     onblur: true, 
     ignore: "", 
     submitHandler: function (form) { // for demo 
      alert('valid form submitted'); // for demo 
      return false; // for demo 
     } 
    }); 
}); 

jQuery.validator.addMethod("vin", function (vin) { 
    if (!(/^[A-HJ-NP-Z0-9]{17}$/.test(vin))) return false; 
    return true; 
}, "Must be a valid VIN"); 

jQuery.validator.addMethod("non_neg_int", function (non_neg_int) { 
    if (isNaN(non_neg_int) || non_neg_int == null || non_neg_int == "" || non_neg_int < 0 || !is_int(non_neg_int)) return false; 

    return true; 
}, "Must be a nonnegative integer"); 

function is_int(value) { 
    if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) { 
     return true; 
    } else { 
     return false; 
    } 
} 

Answer 1

報價OP：

「不過，就算我不是required類添加到表單元素，這 驗證方法仍然會被調用，並評估爲假，如果 用戶輸入什麼都沒有。」

我無法重現您描述的問題。

發佈時，空字段不會調用您的自定義方法，也不需要字段。

DEMO：http://jsfiddle.net/mJvA8/

HTML：

<form id="myform"> 
    <input type="text" name="field1" /> 
    <input type="submit" /> 
</form> 

jQuery的：

$(document).ready(function() { 

    jQuery.validator.addMethod("num", function (num) { 
     if (isNaN(num)) return false; 
     return true; 
    }, "Please enter a valid number"); 

    $('#myform').validate({ // initialize the plugin 
     rules: { 
      field1: { 
       num: true 
      } 
     } 
    }); 

}); 

---

編輯基於編輯OP：

我發現您的代碼有以下問題。只有其中一些項目打破了你的代碼。其餘的只是一個很好的做法。您可以一次測試這些，親自查看。

1）沒有名爲onblur這樣的選項。有一個名爲onfocusout，默認啓用。如果你通過true這個，你會打破它。你只能通過false來禁用它，或者傳遞一個自定義函數來覆蓋它。要保持啓用默認onfocusout選項，請將其完全保留。

2）每個輸入元素必須有一個有效的name和name="2"是無效的。它不能以數字開頭。

3）如果你想驗證任何隱藏字段，該ignore選項必須設置爲ignore: []，而不是ignore: ""。否則，請不要選擇此選項，默認情況下會忽略隱藏的字段。參見：https://stackoverflow.com/a/8565769/594235

4）我不明白在每個元素上指定value=""這一點。如果您不使用它，只需省略value屬性即可。

5）而是寫出了這一切......

if (test) return false; 
return true; 

...你能更簡單地寫一個短線：return !(test);（我只是增加了!翻轉您的特定test邏輯return false，就像你寫的。）

6）As per documentation，你只有通過value，element以及可選的params，如下所示：.addMethod("myrule", function(value, element, params) { ... }, "message")。

該語法減輕了混淆。此外，使用規則的名稱"non_neg_int"代替"value"這個詞完全違反了您的non_neg_int自定義方法。

如果您不希望這些規則是「必需的」，那麼您必須修復規則中的邏輯。例如，non_neg_int方法正在查找空字段或空字段，因此當字段爲空時它當然會給出錯誤消息。

關於這兩條規則，我只是增加了this.optional(element)，這使得規則可選。換句話說，如果你把它留空，這條規則什麼都不會做。

return this.optional(element) || !(test); 

下面有一個工作演示，你可以調整，因爲你認爲合適。

新演示：http://jsfiddle.net/gVVa8/