對所有輸入框重複相同的程式碼，以便它們顯示錯誤

Question

我的頁面上有幾個輸入框。這是其中的兩個。我想限制用戶在輸入框中只能輸入數字。

<input id="address1"  class="work" />Address1
           <input id="address2"  class="work" />Address2
           <input style="float: right; margin-bottom:20px" type="submit" id="myBtn" 
            value="Submit" class="btn btn-primary"  />
           <alert13></alert13>

這是限制使用者只能輸入數字的代碼。

<script>

       
        

      $(document).ready(function () {
         
    
                $('#myBtn1').click(function (event) {
                
                     var txtValue = document.getElementById("address1");
                if (/^[a-zA-Z0-9]+$/i.test(txtValue.value)) {
                    if ((!/^[a-zA-Z]+$/i.test(txtValue.value)) && (/^[0-9]+$/i.test(txtValue.value))) {
                        $('alert13').html("value need to be alphanumeric").css('color', 'red');
                        event.preventDefault();
                    }
                    else {
                        $('alert13').html("");
                    }
                }
                }
                }

</script>

我不想為每個輸入框重複上面的程式碼。他們是否有更快的方法，以便我可以根據其類別名稱對所有文字方塊應用相同的程式碼，並且如果在任何輸入框中輸入所有數字，則會彈出單獨的錯誤。它們的類別名稱都是相同的。

Answer 1

是的，您可以透過使用類別選擇器並迭代該類別的每個元素來重構程式碼以避免重複。以下是如何修改程式碼以實現此目的的範例：

Address1
Address2

$(document).ready(function () {
    $('#myBtn').click(function (event) {
        let valid = true;

        $('.work').each(function (index, element) {
            const txtValue = $(element).val();
            const alertElement = $('alert13');

            if (/^[a-zA-Z0-9] $/i.test(txtValue)) {
                if ((!/^[a-zA-Z] $/i.test(txtValue)) && (/^[0-9] $/i.test(txtValue))) {
                    alertElement.html("Value needs to be alphanumeric for input #" (index 1)).css('color', 'red');
                    valid = false;
                    return false; // Breaks the loop
                } else {
                    alertElement.html("");
                }
            }
        });

        if (!valid) {
            event.preventDefault();
        }
    });
});

在此範例中，我們使用類別選擇器 $('.work') 取得具有類別 work 的所有元素，然後使用each 函數迭代每個元素。我們也使用 valid 變數來追蹤驗證狀態。如果任何輸入框包含無效數據，我們將 valid 設為 false 並中斷循環。最後，如果有效變數為 false，我們將阻止表單提交。