JavaScript表单多输入项校验仅首个条件生效问题咨询

问题根因 #

你代码的核心错误是每个if校验分支执行后都加了return true，只要任意一个校验条件满足（通常是排在最前面的firstName校验先通过），整个事件回调函数就会直接终止，后续其他输入项的校验逻辑完全不会执行，这就是只有首个校验规则能生效的直接原因。

除此之外还有几个逻辑错误：

• 事件绑定不符合需求：你给表单绑定了change事件，该事件仅在某一个输入项修改后失焦时触发，且e.preventDefault()对change事件无效。如果要做实时字段校验，应该给每个输入项单独绑定事件；如果要做提交前全量校验，应该绑定表单的submit事件。
• 缺失校验失败的处理逻辑：目前只写了校验通过的边框样式，没有校验不通过的错误样式、提示处理。
• 末尾else分支逻辑错误：它仅和最后一个city的if判断配对，只有city校验不通过时才会触发alert('Good !')，完全不符合「所有字段校验通过才提示」的预期。

修复代码 #

方案：实时校验+提交前全量校验 #

既支持输入过程中实时反馈校验结果，也能在提交时做全量检查：

let inputFirstname = document.querySelector('#firstName');
let inputLastname = document.querySelector('#lastName');
let inputEmail = document.querySelector('#email');
let inputAddress = document.querySelector('#address');
let inputCity = document.querySelector('#city');

const regexName = /^[a-zA-Z-\s]+$/;
const regexMail = new RegExp('^[a-zA-Z0-9.-_]+[@]{1}[a-zA-Z0-9.-_]+[.]{1}[a-z]{2,10}$');
const regexAdress = /^(([a-zA-ZÀ-ÿ0-9]+[\s\-]{1}[a-zA-ZÀ-ÿ0-9]+)){1,20}$/;

// 封装通用校验函数
function validateField(input, regex) {
  if (regex.test(input.value.trim())) {
    input.style.border = "#7EEA5E solid 2px";
    return true;
  } else {
    input.style.border = "#EA6B5E solid 2px";
    return false;
  }
}

// 给每个输入项绑定实时校验事件
inputFirstname.addEventListener('input', () => validateField(inputFirstname, regexName));
inputLastname.addEventListener('input', () => validateField(inputLastname, regexName));
inputEmail.addEventListener('input', () => validateField(inputEmail, regexMail));
inputAddress.addEventListener('input', () => validateField(inputAddress, regexAdress));
inputCity.addEventListener('input', () => validateField(inputCity, regexName));

// 表单提交前全量校验
document.querySelector('#formContact').addEventListener('submit', function (e) {
  e.preventDefault();
  // 所有字段都校验通过才允许后续操作
  const isAllValid = 
    validateField(inputFirstname, regexName) &&
    validateField(inputLastname, regexName) &&
    validateField(inputEmail, regexMail) &&
    validateField(inputAddress, regexAdress) &&
    validateField(inputCity, regexName);
  
  if (isAllValid) {
    alert('Good !');
    // 校验通过可执行表单提交逻辑：this.submit()
  }
});

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