对所有输入框重复相同的代码，以便它们显示错误

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，我们将阻止表单提交。