JS表单验证异常：不符合规则仍返回true并跳转至目标页面

云上老周

2026-7-12

表单验证问题解决方案

问题根源

你的代码中ShowError函数存在逻辑错误：当通过document.getElementById(id)获取到输入框元素后，尝试通过element.getElementsByClassName('return-error')[0]查找错误提示元素，但错误提示div是输入框的兄弟元素，而非子元素，因此无法找到目标元素，导致代码抛出TypeError（无法给undefined设置innerHTML），进而中断ValidateForm函数的执行，使得return_value = false这行代码从未被执行，最终函数返回默认的true，表单正常提交跳转。

修复步骤

1. 修正`ShowError`函数

使用CSS相邻兄弟选择器直接定位输入框对应的错误提示元素，确保能准确找到目标：

function ShowError(id, error) {
  // 定位输入框紧邻的错误提示div
  const errorElement = document.querySelector(`#${id} + .return-error`);
  if (errorElement) {
    errorElement.innerHTML = error;
  }
}

2. 优化`ValidateForm`函数

每次验证前清空所有错误提示，避免旧错误残留
对输入值去除首尾空格，避免空格计入长度（可选但推荐）

function ValidateForm() {
  let return_value = true;

  // 清空所有错误提示
  document.querySelectorAll('.return-error').forEach(el => el.innerHTML = '');

  const name = document.forms['MyForm']["name"].value.trim();
  const phonenumber = document.forms['MyForm']["number"].value;
  const email = document.forms['MyForm']["email"].value;
  const password = document.forms['MyForm']["pass"].value;
  const cpassword = document.forms['MyForm']["cpass"].value;

  if (name.length > 10) {
    ShowError("name", "*Username is too long");
    return_value = false;
  }

  // 可在此添加其他验证规则（如手机号格式、邮箱校验、密码一致性等）

  return return_value;
}