如何实时校验多个input输入框的值并切换校验状态

问题分析 #

• 选择器写法错误：jQuery多元素选择器需要用逗号分隔，你写的$('#name' && '#lname' && '#age')只会选中#age元素，仅给这一个输入框绑定了事件，自然无法监听所有输入框的变化。
• 缺失校验逻辑：每次触发keyup事件后直接设置为validated状态，没有判断所有输入框是否都非空，也没有处理内容为空时回退到invalid状态的逻辑。
• 操作DOM方法错误：replaceWith会直接把#display元素替换为纯文本，后续再操作#display时会找不到对应DOM节点，应该用text()方法修改元素内部文本。

修正后代码 #

JavaScript代码

// 给三个输入框同时绑定keyup事件
$('#name, #lname, #age').on('keyup', function () {
  // 统一去除首尾空格后判断是否为空
  const firstName = $('#name').val().trim()
  const lastName = $('#lname').val().trim()
  const age = $('#age').val().trim()
  const $display = $('#display')

  // 三个输入框都不为空时为合法状态
  if (firstName && lastName && age) {
    $display.removeClass('invalides').addClass('validated').text('Valid')
  } else {
    $display.removeClass('validated').addClass('invalides').text('Invalid')
  }
})

CSS代码

.invalides {
  border: 1px solid red;
}
.validated {
  border: 1px solid green;
}

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" />
<input type="text" id="lname" />
<input type="number" id="age" />
<span id="display" class="invalides">Invalid</span>

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