Wiederholen Sie den gleichen Code für alle Eingabefelder, damit sie den Fehler anzeigen

Question

Ich habe mehrere Eingabefelder auf meiner Seite. Hier sind zwei davon. Ich möchte den Benutzer darauf beschränken, nur Zahlen in das Eingabefeld einzugeben.

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

Dies ist ein Code, der den Benutzer darauf beschränkt, nur Zahlen einzugeben.

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

Ich möchte den obigen Code nicht für jedes Eingabefeld wiederholen. Gibt es eine schnellere Möglichkeit, damit ich den gleichen Code basierend auf ihrem Klassennamen auf alle Textfelder anwenden kann und ein separater Fehler angezeigt wird, wenn alle Zahlen in ein Eingabefeld eingegeben werden? Ihre Klassennamen sind alle gleich.

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