如何在输入框内容满足校验条件时自动消除表单错误提示

你当前的代码仅在表单提交时触发校验，且遇到第一个校验失败的字段就直接终止执行，没有监听输入事件，因此用户修正输入内容后错误提示不会自动消失。可通过以下代码修改实现需求，无需改动原有HTML结构：

完整JS代码 #

// 等待页面DOM加载完成后绑定输入监听事件
document.addEventListener('DOMContentLoaded', function () {
  // 给每个输入框绑定输入事件，实时校验对应字段
  document.getElementById('name').addEventListener('input', validateName);
  document.getElementById('phone').addEventListener('input', validatePhone);
  document.getElementById('email').addEventListener('input', validateEmail);
  document.getElementById('message').addEventListener('input', validateMessage);
});

// 姓名字段校验
function validateName() {
  const nameVal = document.getElementById('name').value;
  const errorDom = document.getElementById('error_name');
  if (nameVal.length < 5 || !isNaN(nameVal) || nameVal.length > 50) {
    errorDom.innerText = "*请输入有效姓名*";
    return false;
  }
  // 校验通过清空错误提示
  errorDom.innerText = "";
  return true;
}

// 手机号字段校验
function validatePhone() {
  const phoneVal = document.getElementById('phone').value;
  const errorDom = document.getElementById('error_number');
  if (isNaN(phoneVal) || phoneVal.length !== 10) {
    errorDom.innerText = "*请输入有效的10位手机号*";
    return false;
  }
  errorDom.innerText = "";
  return true;
}

// 邮箱字段校验
function validateEmail() {
  const emailVal = document.getElementById('email').value;
  const errorDom = document.getElementById('error_email');
  if (emailVal.indexOf('@') <= 0 || (emailVal.charAt(emailVal.length - 4) != '.' && emailVal.charAt(emailVal.length - 3) != '.')) {
    errorDom.innerText = "*请输入有效邮箱*";
    return false;
  }
  errorDom.innerText = "";
  return true;
}

// 留言字段校验
function validateMessage() {
  const msgVal = document.getElementById('message').value;
  const errorDom = document.getElementById('error_message');
  if (msgVal.length <= 30 || msgVal.length >= 300) {
    errorDom.innerText = "*留言长度需在30到300字符之间*";
    return false;
  }
  errorDom.innerText = "";
  return true;
}

// 表单提交总校验
function validate() {
  // 所有字段校验通过才允许提交
  const allValid = validateName() && validatePhone() && validateEmail() && validateMessage();
  if (allValid) {
    alert("表单提交成功！");
    return true;
  }
  return false;
}

改动说明 #

• 将每个字段的校验逻辑拆分为独立函数，提交校验和实时输入校验可复用，无需重复写校验规则
• 给所有输入框、文本框绑定了input监听事件，用户每输入一次内容就会触发对应字段的校验，内容符合规则时会自动清空对应错误提示
• 提交校验时会一次性检查所有字段的合法性，所有字段都符合要求才会提交，不会出现前面的字段修正后才提示后面字段错误的问题

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