如何使用jQuery/JavaScript针对每个输入框单独隐藏对应两个<span>元素，求通用方案

问题根因 #

你现有代码的核心问题是传入validateInput的.validation-container.success、.validation-container.error属于全局选择器，jQuery执行匹配时会选中页面所有符合类名的元素，所以触发校验后所有输入框的标识都会显示。

优化后实现方案 #

1. 调整HTML结构 #

给输入框新增data-rule属性关联对应校验规则，不需要逐个修改DOM结构，仅新增属性即可：

<div class="form-group">
   <label for="fname" class="form-lable">First name</label>
   <input type="text" id="fname" name="fname" class="form-input" required data-rule="name">
   <div for="fname">
       <span class="validation-container success"><i class="bi bi-check2"></i></span>
       <span class="validation-container error"><i class="bi bi-x"></i></span>
   </div>
</div>
<div class="form-group">
   <label for="lname" class="form-lable">Last name</label>
   <input type="text" id="lname" name="lname" class="form-input" required data-rule="name">
   <div for="lname">
       <span class="validation-container success"><i class="bi bi-check2"></i></span>
       <span class="validation-container error"><i class="bi bi-x"></i></span>
   </div>
</div>

2. 重写JS校验逻辑 #

统一维护校验规则、批量绑定事件，所有操作限定在当前输入框的父级范围内，不会干扰其他输入框：

// 统一维护所有校验规则，新增规则直接加属性即可
const validateRules = {
  // 姓名校验正则，可根据需求调整
  name: /^[A-Za-z\u4e00-\u9fa5]{2,20}$/,
  // 示例：后续新增手机号、邮箱等规则可直接扩展
  // phone: /^1[3-9]\d{9}$/,
  // email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
}

// 批量绑定所有输入框的keyup事件，不需要逐个按ID绑定
$('.form-input').on('keyup', function () {
  const $currentInput = $(this)
  // 仅查找当前输入框对应父级下的校验容器，不会匹配其他输入框的元素
  const $validationWrap = $currentInput.parent().find('.validation-container')
  $validationWrap.hide()

  // 获取当前输入框对应的校验规则
  const ruleKey = $currentInput.data('rule')
  const currentRule = validateRules[ruleKey]
  // 未配置规则则不执行校验
  if (!currentRule) return

  const validateResult = currentRule.test($currentInput.val().trim())
  // 把当前范围的校验容器传入通用函数
  validateInput(validateResult, $validationWrap)
})

// 改造后的通用校验函数
function validateInput(isPass, $wrap) {
  if (isPass) {
    $wrap.filter('.success').show()
    checkAll() // 原有全局校验逻辑保留
  } else {
    $wrap.filter('.error').show()
  }
}

方案优势 #

• 无需逐个给输入框绑定事件，新增输入框只要加form-input类和对应的data-rule属性即可使用，扩展性强
• 所有校验规则统一维护，修改调整方便
• 所有DOM操作严格限定在当前输入框的父级范围内，不会干扰其他输入框的校验状态

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