如何基于类名批量实现输入框防全数字验证及独立错误提示？

页面里有多个class为work的输入框，部分HTML代码如下：

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

目前只实现了单个输入框的验证：输入全数字时，提示需要输入字母数字组合，对应的JS代码是这样的：

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

现在不想给每个输入框重复写代码，希望基于类名批量套用验证规则，而且每个输入框输入全数字时能显示独立的错误提示，有没有更高效的实现方式？

1. 调整HTML结构，给每个输入框配独立错误提示位 #

原来的单个<alert13>没法实现独立提示，我们给每个work类的输入框加个专属的错误提示元素，比如用<span>：

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

2. 编写批量验证的JS代码 #

通过类名work选中所有目标输入框，循环遍历做验证，把错误提示插到对应输入框的专属提示位里：

<script>
$(document).ready(function () {
  $('#myBtn').click(function (event) {
    let formIsValid = true;
    // 先清空所有错误提示，避免残留旧信息
    $('.error-tip').html("");
    
    // 遍历所有class为work的输入框
    $('.work').each(function() {
      const inputValue = $(this).val().trim();
      // 找到当前输入框对应的错误提示元素
      const errorEl = $(this).siblings('.error-tip');
      
      // 验证规则：输入为纯数字时提示错误
      if (/^[0-9]+$/.test(inputValue)) {
        errorEl.html("请输入字母数字组合").css('color', 'red');
        formIsValid = false;
      }
    });
    
    // 只要有一个输入框不合格，就阻止表单提交
    if (!formIsValid) {
      event.preventDefault();
    }
  });
});
</script>

方案说明 #

• 用$('.work').each()遍历所有目标输入框，彻底避免重复编写验证逻辑
• 每个输入框绑定相邻的.error-tip作为专属提示位，实现独立错误提示，不会互相干扰
• 先清空所有旧提示再重新验证，避免残留之前的错误信息
• 用formIsValid变量跟踪整体表单状态，只要有一个输入框不通过就阻止提交
• 简化正则判断：直接检查是否为纯数字即可，因为需求就是禁止纯数字，允许纯字母或字母数字组合

内容的提问来源于stack exchange，提问作者Anjali