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

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

是的，您可以通过使用类选择器并使用该类遍历每个元素来重构代码以避免重复。以下是如何修改代码以实现此目的的示例：

<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>

$(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')

来获取类工作的所有元素，然后使用 each 函数遍历每个元素。我们还使用 valid 变量跟踪验证状态。如果任何输入框包含无效数据，我们将 valid 设置为 false 并中断循环。最后，如果有效变量为假，我们将阻止表单提交。