表单验证校验按钮无法正常工作 添加验证逻辑后勾选按钮消失求助

存在的核心问题 #

• HTML结构错误：嵌套了5个重复id为form的表单标签，提交按钮位于最内层的表单，JS绑定的是最外层的表单提交事件，导致触发逻辑失效
• 元素id不匹配：
  • JS获取用户名使用getElementById('Username')，HTML中用户名input的id为小写username
  • JS获取手机号使用getElementById('Mobile nummber')，HTML中手机号input的id为phone，且id不允许包含空格
  • 确认密码input的id包含空格，不符合DOM规范
• JS语法错误：
  • 字符串方法indexof、lastindexof大小写错误，正确应为indexOf、lastIndexOf
  • DOM方法queryselector大小写错误，正确应为querySelector
• 逻辑错误：
  • 邮箱校验失败时，setErrorMsg第一个参数传入了邮箱字符串而非Email DOM元素，导致无法正确定位父元素
  • 未定义setSuccessMsg函数
  • 错误状态赋值类名时多加了small类，会覆盖原有样式导致图标/按钮显示异常

修复后的完整代码 #

HTML部分

<style>
/* 校验状态基础样式 */
.form-control i {
  display: none;
  margin-left: 8px;
}
.form-control.success .fa-check-circle {
  color: #2ecc71;
  display: inline-block;
}
.form-control.error .fa-exclamation-circle {
  color: #e74c3c;
  display: inline-block;
}
.form-control small {
  color: #e74c3c;
  display: none;
  margin: 4px 0 12px 0;
}
.form-control.error small {
  display: block;
}
.btn {
  margin-top: 16px;
  padding: 8px 24px;
  cursor: pointer;
}
</style>
<div class="container">
  <div class="header">
    <h2>Registration form</h2>
  </div>
  <form class="form" id="form">
    <div class="form-control">
      <label>Username</label>
      <input type="text" id="username" placeholder="Enter your full name" autocomplete="off">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error Msg</small>
    </div>
    <div class="form-control">
      <label>Email</label>
      <input type="email" id="email" placeholder="Enter your Email" autocomplete="off">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error Msg</small>
    </div>
    <div class="form-control">
      <label>Mobilenumber</label>
      <input type="number" id="mobile" placeholder="Enter your Mobile num" autocomplete="off">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error Msg</small>
    </div>
    <div class="form-control">
      <label>password</label>
      <input type="password" id="password" placeholder="Enter your password" autocomplete="off">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error Msg</small>
    </div>
    <div class="form-control">
      <label>Confirmpassword</label>
      <input type="password" id="confirmPassword" placeholder="Enter your password again" autocomplete="off">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error Msg</small>
    </div>
    <input type="submit" value="submit" class="btn" name="">
  </form>
</div>

JS部分

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const mobile = document.getElementById('mobile');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  validate();
})

const isEmail = (emailVal) => {
  const atsymbol = emailVal.indexOf('@');
  if (atsymbol < 1) return false;
  const dot = emailVal.lastIndexOf('.');
  if (dot <= atsymbol + 2) return false;
  if (dot === emailVal.length - 1) return false;
  return true;
}

function setErrorMsg(input, errormsgs) {
  const formControl = input.parentElement;
  const small = formControl.querySelector('small');
  formControl.className = "form-control error";
  small.innerText = errormsgs;
}

function setSuccessMsg(input) {
  const formControl = input.parentElement;
  formControl.className = "form-control success";
}

const validate = () => {
  const usernameVal = username.value.trim();
  const emailVal = email.value.trim();
  const mobileVal = mobile.value.trim();
  const passwordVal = password.value.trim();
  const confirmPasswordVal = confirmPassword.value.trim();

  // 用户名校验
  if (usernameVal === "") {
    setErrorMsg(username, '用户名不能为空');
  } else if (usernameVal.length <= 2) {
    setErrorMsg(username, '用户名至少需要3个字符');
  } else {
    setSuccessMsg(username);
  }

  // 邮箱校验
  if (emailVal === "") {
    setErrorMsg(email, '邮箱不能为空');
  } else if (!isEmail(emailVal)) {
    setErrorMsg(email, '请输入正确格式的邮箱');
  } else {
    setSuccessMsg(email);
  }
  
  // 手机号校验
  if (mobileVal === "") {
    setErrorMsg(mobile, '手机号不能为空');
  } else if(mobileVal.length !== 11) {
    setErrorMsg(mobile, '请输入11位正确手机号');
  } else {
    setSuccessMsg(mobile);
  }
  
  // 密码校验
  if (passwordVal === "") {
    setErrorMsg(password, '密码不能为空');
  } else if(passwordVal.length < 6) {
    setErrorMsg(password, '密码长度不能少于6位');
  } else {
    setSuccessMsg(password);
  }
  
  // 确认密码校验
  if (confirmPasswordVal === "") {
    setErrorMsg(confirmPassword, '确认密码不能为空');
  } else if(confirmPasswordVal !== passwordVal) {
    setErrorMsg(confirmPassword, '两次输入密码不一致');
  } else {
    setSuccessMsg(confirmPassword);
  }
}

内容的提问来源于stack exchange，提问作者Haseeb Ur Rehman