試圖用jQuery動態驗證字段 - 自定義函數

我正在研究jQuery中的驗證函數，並且遇到了一些問題。我有一個非常冗長的工作版本，並且充滿了我試圖避免的硬編碼表單值。這是什麼工作，目前：試圖用jQuery動態驗證字段 - 自定義函數

$(document).ready(function(){ 
    var fname = $("#formFName"); 
    var lname = $("#formLName"); 

    fname.blur(validateFName); 
    lname.blur(validateLName); 

    function validateFName(){ 
    if(fname.val().length > 0){ 
     fname.removeClass("req_error"); 
     return true; 
    } 
    else { 
     fname.addClass("req_error"); 
     return false; 
    } 
    } 

    function validateLName(){ 
    if(lname.val().length > 0){ 
     lname.removeClass("req_error"); 
     return true; 
    } 
    else { 
     lname.addClass("req_error"); 
     return false; 
    } 
    } 
});

這部分工作正常的這兩個領域，但我想封裝整個事情在一個更容易維護的功能。事情是這樣的：

$(document).ready(function(){ 

    $("#first_name").blur(validateField("first_name","text")); 
    $("#last_name").blur(validateField("last_name","text")); 
    $("#email_address").blur(validateField("email_address","email")); 

    function validateField(formfield, type){ 
    var field = $("#" + formfield); 
    switch(type) { 
     case "text": 
     if(field.val().length > 0){ 
      field.removeClass("req_error"); 
      return true; 
     } 
     else { 
      field.addClass("req_error"); 
      return false; 
     } 
     break; 
     case "email": 
     var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-][email protected][a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; 
     if(filter.test(field.val())) { 
      field.removeClass("req_error"); 
      return true; 
     else { 
      field.addClass("req_error"); 
      return false; 
     } 
     break; 
    } 
    } 
});

然而，當我這樣做，我得到了Firefox的JS錯誤日誌以下錯誤：

錯誤：（（f.event.special [r.origType] || {} ）.handle || r.handler）。適用不是一個函數源文件：/scripts/jquery-1.7.1.min.js 行：3

快速谷歌對於錯誤沒有取得什麼這對我來說意味着什麼，不幸的是。我已經嘗試過在各個地方發出警報，並且這樣做已經驗證了正確的表單字段名稱確實在應該傳遞的位置，但是因爲我對jQuery相當陌生（而且對JavaScript不太好），我在這裏有點損失。

感謝任何能指引我正確方向的人。另外，如果有人認爲我以錯誤的方式解決這個問題，我很樂意改變。我嘗試使用jQuery驗證插件，但我也使用了一些動態創建的字段，不幸的是，插件阻止訪問者在涉及隱藏的必填字段時提交表單。

來源

2012-04-13 Sean Cunningham

聽起來像是你可以通過附加的行爲，而不是特定的元素簡化這個：

<input type="text" id="someId" class="validate-text" /> 
<input type="text" id="someOtherId" class="validate-email" /> 

$('.validate-text').live('blur', function() 
{ 
    $(this).removeClass('req_error'); 
    if($.trim(this.value).length < 1) 
     $(this).addClass('req_error'); 
}); 

$('.validate-email').live('blur', function() 
{ 
    // Same thing with the email validation logic 
});

這樣，你不需要特定的事件處理程序連接到您的元素，而使用這些處理器來檢查你想要的行爲。然後，只需使用特定類標記HTML元素即可標記所需的驗證模式。

假設我正確理解你的問題。

來源

2012-04-13 18:15:50 Tejs

我喜歡這個想法，我有同樣的想法，但絕對不知道如何實現這一點。我已經添加了你的代碼，但我似乎無法讓它工作 - 我也沒有在錯誤控制檯中發現任何錯誤。我需要包括$（document）.ready（function（）{？我已經嘗試過並且沒有任何結果 – 2012-04-13 18:54:37

沒關係，我是個白癡，我忘記了我正在尋找什麼課程......作品就像冠軍一樣，效率比我想要做的要好得多。感謝你們！ – 2012-04-13 19:02:11

您無法將函數調用表達式傳遞給.blur（）。你可以傳遞一個匿名函數的構造：

$("#first_name").blur(function() {validateField("first_name","text");});

或傳遞函數的名稱：

function validateFirstName() { 
    validateField("first_name","text"); 
} 

* * * 

$("#first_name").blur(validateFirstName));

@ TEJS的建議，使用類附加驗證是一個很好的，也是如此。

來源

2012-04-13 18:24:11

大衛 - 也感謝你們，你們對我的代碼的更正解決了我的具體問題，但爲了簡單起見，我喜歡驗證器選項。 – 2012-04-13 19:02:59

試圖用jQuery動態驗證字段 - 自定義函數

回答

相關問題