jquery裏面運行條件驗證.on

Question

我有一個ID爲#primarySearch的表單。它有3個文本輸入，全部都有自己的ID，如下所示：#ecNumber,#casNumber,#substanceName。

我有以下js。如果用戶輸入在#primarySearch文本輸入什麼它運行一個名爲processPrimarySearch功能和適當的輸入值發送給它：

$('#primarySearch input[type="text"]').on({ 
    "keyup": function(e) { 
     // Ignore tab key 
     if (e.which != 9) { 
     processPrimarySearch.call(this); 
     } 
    } 
}); 

function processPrimarySearch() { 
    // ... 
} 

我也得到了一些其他的JS（這只是內部document.ready）停靠用戶輸入除數字和破折號之外的任何內容 - 但僅限於#ecNumber和#casNumber字段（請注意，我從jQuery only allow numbers,letters and hyphens改編了此字段）。雖然此代碼在用戶輸入這兩個字段時觸發，但也會導致processPrimarySearch運行，而不管用戶輸入是否有效。這是因爲在代碼之間沒有連接之上，下面的代碼：

$('#ecNumber, #casNumber').keypress(function (e) { 
    var allowedChars = new RegExp("^[0-9\-]+$"); 
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode); 
    if (allowedChars.test(str)) { 
     return true; 
    } 
    e.preventDefault(); 
    return false; 
}).keyup(function() { 
    // the addition, which will check the value after a keyup (triggered by Ctrl+V) 
    // We take the same regex as for allowedChars, but we add^after the first bracket : it means "all character BUT these" 
    var forbiddenChars = new RegExp("[^0-9\-]", 'g'); 
    if (forbiddenChars.test($(this).val())) { 
     $(this).val($(this).val().replace(forbiddenChars, '')); 
    } 
}); 

發生了什麼，此刻的結果是，如果一個字符被輸入如#ecNumber「Z」，確認正則表達式代碼將會觸發並停止輸入中出現的字符「z」 - 好的。但是，processPrimarySearch()也會觸發，因爲它在.on內部定義爲#primarySearch表單中的任何輸入。

我的問題： 我想要做的就是運行驗證的正則表達式我.on內，但只有當它是#ecNumber或#casNumber場（#substanceName不能在此處驗證）。

我已經設法寫出以下內容，它使用數組來說出用戶輸入的是哪個字段。我在哪裏做console.log是我需要驗證正則表達式發生的地方

$('#primarySearch input[type="text"]').on({ 
    "keyup": function(e) { 
     // Ignore tab key 
     if (e.which != 9) { 

     var arr = ["ecNumber", "casNumber"]; 
     if ($.inArray($(this).attr('id'), arr)!== -1) { 
      console.log($(this).attr('id')); 
     } 

     processPrimarySearch.call(this); 
     } 
    } 
}); 

這樣做的最佳方法是什麼？我不確定是否將執行正則表達式的代碼移入函數，然後調用它（使用.call？）或其他方法？有沒有什麼問題與本質上是異步的？

Answer 1

這完全是關於程序流程以及如何處理它。您提出代碼的最後一種方式不是真正的異步問題。這是一個解決方案（許多可能的解決方案）。我在代碼中添加了一些註釋來解釋基礎知識。

$('#primarySearch input[type="text"]').on({ 
    "keyup": function(e) { 
     // if this is not the tab key and the input contains valid characters 
     if (e.which != 9 && isThisValid($(this), e)) { 
      processPrimarySearch.call(this); 
     } 
     else { 
      e.preventDefault(); 
     } 
    } 
}); 


function isThisValid($elem, event) { 
    var ids = ["ecNumber", "casNumber"], // ids to validate, everything else is valid 
     result = true; // default result 

    // is this one of the id's to validate? 
    if(ids.indexOf($elem.attr('id')) !== -1) { 
     // do some validation 
     var allowedChars = new RegExp("^[0-9\-]+$"), 
      str = String.fromCharCode(!event.charCode ? event.which : event.charCode); 

     // is it valid? 
     if (!allowedChars.test(str)) { 
      result = false; 
     } 
    } 

    return result; 
} 

function processPrimarySearch() { 
    // ...  
}