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

问：

我的页面上有几个输入框。这是其中的两个。我想限制用户在输入框中只输入数字。

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

我不想为每个输入框重复上述代码。他们有没有更快的方法，以便我可以根据它们的类名对所有文本框应用相同的代码，如果在任何输入框中输入所有数字，则会弹出单独的错误。所有这些的类名都是相同的。

JavaScript HTML jQuery 正则表达式

$(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();
        }
    });
});

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

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

Repeating the same code for all the input boxes so that they show the error

评论

评论