使用HTML5验证结合JS控制表单错误样式时如何避免输入即触发错误

解决方案 #

你遇到的问题是校验触发时机过早，每次按键输入都会立即执行校验逻辑，自然会在用户输入未完成时就显示错误样式。你可以通过控制校验触发时机解决问题，以下是两种常用实现方案： #

方案1：失焦/提交后才开启实时校验 #

这种方案兼顾体验和实时提示：用户第一次输入时不会实时报错，等用户离开输入框或点击提交按钮后，后续的输入修改才会实时提示校验结果，避免输入中途误报错。
修改后的代码如下：

<form action="" id="addForm">
    <div>
        <label for="name">Name</label>
        <input type="text" id="name" name="name" required minlength="3" />
    </div>
    <button type="submit">Add</button>
</form>

window.onload = handleLoad;

function handleLoad() {
  const form = document.forms.addForm;
  const name = form.name;
  // 标记是否开启实时校验，默认关闭
  let enableRealtimeValidate = false;

  // 输入框失焦时开启校验，同时执行一次校验
  name.addEventListener('blur', () => {
    enableRealtimeValidate = true;
    validateName();
  })

  // 只有开启实时校验后，按键才会触发校验
  name.addEventListener('keyup', () => {
    if (enableRealtimeValidate) {
      validateName();
    }
  })

  // 表单提交时统一校验
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    enableRealtimeValidate = true;
    if (validateName()) {
      // 校验通过，执行提交逻辑，例如 form.submit()
      console.log('表单校验通过')
    }
  })

  // 抽离公共校验逻辑
  function validateName() {
    const isValid = name.checkValidity();
    name.classList.toggle('error', !isValid);
    return isValid;
  }
}

方案2：仅在失焦和提交时校验 #

如果不需要实时提示，也可以直接去掉keyup的校验绑定，只有用户离开输入框、或点击提交按钮时才校验，实现更简单：

window.onload = handleLoad;

function handleLoad() {
  const form = document.forms.addForm;
  const name = form.name;

  name.addEventListener('blur', validateName)

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (validateName()) {
      // 执行提交逻辑
    }
  })

  function validateName() {
    const isValid = name.checkValidity();
    name.classList.toggle('error', !isValid);
    return isValid;
  }
}

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