JS表单怎么验证_J*aScript表单验证实现方法与实例讲解

function validateForm() {
  const name = document.getElementById("name").value;
  if (name === "") {
    alert("姓名不能为空");
    return false;
  }
  return true;
}

<form onsubmit="return validateForm()">
  <input type="text" id="name" placeholder="请输入姓名">
  <button type="submit">提交</button>
</form>

function validateEmail() {
  const email = document.getElementById("email").value;
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!regex.test(email)) {
    alert("请输入有效的邮箱地址");
    return false;
  }
  return true;
}
</font>

正则说明：
^[^\s@]+ 开头不能有空格或 @，至少一个非空字符；
@[^\s@]+ 必须包含一个 @，后面接域名部分；
\.[^\s@]+$ 以点加后缀结尾（如 .com）。

具备AI长期记忆的下一代团队协作沟通工具

3. 密码强度验证

常见要求：至少6位，包含字母和数字。

function validatePassword() {
  const pwd = document.getElementById("password").value;
  if (pwd.length < 6) {
    alert("密码至少6位");
    return false;
  }
  if (!/\d/.test(pwd) || !/[a-zA-Z]/.test(pwd)) {
    alert("密码需包含字母和数字");
    return false;
  }
  return true;
}

该函数检查长度和字符类型，确保基本安全要求。

4. 综合表单验证实例

将多个验证合并到一个函数中，统一处理。

function checkForm() {
  const name = document.getElementById("name").value;
  const email = document.getElementById("email").value;
  const pwd = document.getElementById("password").value;
  const errors = [];

  if (name === "") errors.push("姓名不能为空");
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) errors.push("邮箱格式不正确");
  if (pwd.length < 6) errors.push("密码至少6位");

  if (errors.length > 0) {
    alert("请修正以下问题：\n" + errors.join("\n"));
    return false;
  }
  return true;
}

这种方式集中管理错误信息，提示更清晰。

基本上就这些。合理使用 J*aScript 表单验证，能显著提升交互体验。注意：前端验证不可替代后端校验，出于安全考虑，服务端必须再次验证所有数据。