JavaScript 表单验证

什么是表单验证

表单验证是确保用户输入的数据符合预期格式和规则的过程，它可以在客户端（浏览器）和服务器端进行。客户端验证主要用于提高用户体验，减少服务器负载，而服务器端验证则是确保数据安全的最后一道防线。

表单验证的重要性

提高用户体验：及时反馈用户输入的错误，避免用户提交后才发现问题
减少服务器负载：在客户端过滤掉无效数据，减少服务器处理错误数据的开销
确保数据一致性：保证提交到服务器的数据格式正确，符合业务规则
增强安全性：防止恶意用户提交无效或有害的数据

客户端验证方法

1. 手动验证

通过 JavaScript 代码手动检查表单元素的值。

javascript

// 手动验证表单
function validateForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var email = document.getElementById("email").value;
  var age = document.getElementById("age").value;

  var isValid = true;
  var errorMessage = "";

  // 验证用户名
  if (!username) {
    errorMessage += "请输入用户名\n";
    isValid = false;
  } else if (username.length < 3) {
    errorMessage += "用户名长度至少为 3 位\n";
    isValid = false;
  }

  // 验证密码
  if (!password) {
    errorMessage += "请输入密码\n";
    isValid = false;
  } else if (password.length < 6) {
    errorMessage += "密码长度至少为 6 位\n";
    isValid = false;
  }

  // 验证邮箱
  if (!email) {
    errorMessage += "请输入邮箱\n";
    isValid = false;
  } else if (!isValidEmail(email)) {
    errorMessage += "请输入有效的邮箱地址\n";
    isValid = false;
  }

  // 验证年龄
  if (!age) {
    errorMessage += "请输入年龄\n";
    isValid = false;
  } else if (isNaN(age) || age < 18 || age > 100) {
    errorMessage += "年龄必须在 18 到 100 之间\n";
    isValid = false;
  }

  if (!isValid) {
    alert(errorMessage);
  }

  return isValid;
}

// 验证邮箱格式
function isValidEmail(email) {
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

// 监听表单提交事件
document.getElementById("myForm").addEventListener("submit", function (e) {
  if (!validateForm()) {
    e.preventDefault();
  }
});

2. HTML5 内置验证

HTML5 提供了内置的表单验证功能，通过添加特定的属性来实现。

常用的 HTML5 验证属性

属性	描述	示例
`required`	表示该字段为必填项	`<input type="text" required>`
`min`	最小值（用于数字、日期等）	`<input type="number" min="18">`
`max`	最大值（用于数字、日期等）	`<input type="number" max="100">`
`minlength`	最小长度（用于文本）	`<input type="text" minlength="3">`
`maxlength`	最大长度（用于文本）	`<input type="text" maxlength="20">`
`pattern`	正则表达式模式	`<input type="text" pattern="[A-Za-z0-9]{6,}">`
`type`	输入类型（如 email、url、number 等）	`<input type="email">`
`step`	步长（用于数字、日期等）	`<input type="number" step="0.5">`

示例

html

<form id="html5Form">
  <div>
    <label for="username">用户名：</label>
    <input
      type="text"
      id="username"
      name="username"
      required
      minlength="3"
      maxlength="20"
      placeholder="请输入用户名"
    />
  </div>
  <div>
    <label for="password">密码：</label>
    <input
      type="password"
      id="password"
      name="password"
      required
      minlength="6"
      placeholder="请输入密码"
    />
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input
      type="email"
      id="email"
      name="email"
      required
      placeholder="请输入邮箱"
    />
  </div>
  <div>
    <label for="age">年龄：</label>
    <input
      type="number"
      id="age"
      name="age"
      required
      min="18"
      max="100"
      placeholder="请输入年龄"
    />
  </div>
  <div>
    <label for="phone">手机号：</label>
    <input
      type="tel"
      id="phone"
      name="phone"
      required
      pattern="1[3-9]\d{9}"
      placeholder="请输入手机号"
    />
  </div>
  <div>
    <label for="website">网站：</label>
    <input
      type="url"
      id="website"
      name="website"
      placeholder="请输入网站地址"
    />
  </div>
  <div>
    <input type="submit" value="提交" />
  </div>
</form>

自定义错误消息

javascript

// 自定义 HTML5 表单验证错误消息
var usernameInput = document.getElementById("username");

usernameInput.addEventListener("input", function (e) {
  if (!usernameInput.validity.valid) {
    if (usernameInput.validity.valueMissing) {
      usernameInput.setCustomValidity("请输入用户名");
    } else if (usernameInput.validity.tooShort) {
      usernameInput.setCustomValidity("用户名长度至少为 3 位");
    } else if (usernameInput.validity.tooLong) {
      usernameInput.setCustomValidity("用户名长度不能超过 20 位");
    } else {
      usernameInput.setCustomValidity("");
    }
  } else {
    usernameInput.setCustomValidity("");
  }
});

// 表单提交时检查
var form = document.getElementById("html5Form");

form.addEventListener("submit", function (e) {
  if (!form.checkValidity()) {
    e.preventDefault();
    console.log("表单验证失败");
  } else {
    console.log("表单验证通过");
  }
});

3. 实时验证

实时验证是在用户输入过程中立即进行验证，提供即时反馈。

javascript

// 实时验证用户名
var usernameInput = document.getElementById("username");
var usernameError = document.getElementById("usernameError");

usernameInput.addEventListener("input", function (e) {
  var username = e.target.value;

  if (!username) {
    usernameError.textContent = "请输入用户名";
    usernameError.style.color = "red";
    e.target.classList.add("error");
  } else if (username.length < 3) {
    usernameError.textContent = "用户名长度至少为 3 位";
    usernameError.style.color = "red";
    e.target.classList.add("error");
  } else if (username.length > 20) {
    usernameError.textContent = "用户名长度不能超过 20 位";
    usernameError.style.color = "red";
    e.target.classList.add("error");
  } else {
    usernameError.textContent = "用户名可用";
    usernameError.style.color = "green";
    e.target.classList.remove("error");
    e.target.classList.add("success");
  }
});

// 实时验证邮箱
var emailInput = document.getElementById("email");
var emailError = document.getElementById("emailError");

emailInput.addEventListener("input", function (e) {
  var email = e.target.value;
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!email) {
    emailError.textContent = "请输入邮箱";
    emailError.style.color = "red";
    e.target.classList.add("error");
  } else if (!emailRegex.test(email)) {
    emailError.textContent = "请输入有效的邮箱地址";
    emailError.style.color = "red";
    e.target.classList.add("error");
  } else {
    emailError.textContent = "邮箱格式正确";
    emailError.style.color = "green";
    e.target.classList.remove("error");
    e.target.classList.add("success");
  }
});

// 实时验证手机号
var phoneInput = document.getElementById("phone");
var phoneError = document.getElementById("phoneError");

phoneInput.addEventListener("input", function (e) {
  var phone = e.target.value;
  var phoneRegex = /^1[3-9]\d{9}$/;

  if (!phone) {
    phoneError.textContent = "请输入手机号";
    phoneError.style.color = "red";
    e.target.classList.add("error");
  } else if (!phoneRegex.test(phone)) {
    phoneError.textContent = "请输入有效的手机号";
    phoneError.style.color = "red";
    e.target.classList.add("error");
  } else {
    phoneError.textContent = "手机号格式正确";
    phoneError.style.color = "green";
    e.target.classList.remove("error");
    e.target.classList.add("success");
  }
});

4. 事件触发验证

在特定事件（如失去焦点）触发时进行验证。

javascript

// 失去焦点时验证
var usernameInput = document.getElementById("username");
var usernameError = document.getElementById("usernameError");

usernameInput.addEventListener("blur", function (e) {
  var username = e.target.value;

  if (!username) {
    usernameError.textContent = "请输入用户名";
    usernameError.style.color = "red";
  } else if (username.length < 3) {
    usernameError.textContent = "用户名长度至少为 3 位";
    usernameError.style.color = "red";
  } else {
    usernameError.textContent = "";
  }
});

// 获得焦点时清除错误信息
usernameInput.addEventListener("focus", function (e) {
  var usernameError = document.getElementById("usernameError");
  usernameError.textContent = "";
});

验证规则

1. 常见验证规则

| 字段类型 | 验证规则 | 正则表达式示例 | | -------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------- | -------------- | ------ | -------------------- | | 用户名 | 长度 3-20 位，只能包含字母、数字、下划线 | /^[a-zA-Z0-9_]{3,20}$/ | | 密码 | 长度 6-20 位，包含字母和数字 | /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/ | | 邮箱 | 符合邮箱格式 | /^[^\s@]+@[^\s@]+\.[^\s@]+$/ | | 手机号 | 11 位数字，以 1 开头 | /^1[3-9]\d{9}$/ | | 身份证号 | 18 位，最后一位可能是 X | /^[1-9]\d{5}(18 | 19 | 20)\d{2}(0[1-9] | 1[0-2])(0[1-9] | [12]\d | 3[01])\d{3}[\dXx]$/ | | URL | 符合 URL 格式 | /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/ | | 日期 | 符合日期格式（YYYY-MM-DD） | /^\d{4}-(0[1-9] | 1[0-2])-(0[1-9] | [12]\d | 3[01])$/ | | 时间 | 符合时间格式（HH:MM:SS） | /^([01]?[0-9] | 2[0-3]):[0-5][0-9]:[0-5][0-9]$/ | | 整数 | 整数 | /^-?\d+$/ | | 小数 | 小数 | /^-?\d+\.\d+$/ | | 邮政编码 | 6 位数字 | /^\d{6}$/ |

2. 自定义验证函数

javascript

// 验证用户名
function validateUsername(username) {
  var usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
  return usernameRegex.test(username);
}

// 验证密码
function validatePassword(password) {
  var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/;
  return passwordRegex.test(password);
}

// 验证邮箱
function validateEmail(email) {
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

// 验证手机号
function validatePhone(phone) {
  var phoneRegex = /^1[3-9]\d{9}$/;
  return phoneRegex.test(phone);
}

// 验证身份证号
function validateIdCard(idCard) {
  var idCardRegex =
    /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
  return idCardRegex.test(idCard);
}

// 验证 URL
function validateUrl(url) {
  var urlRegex =
    /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
  return urlRegex.test(url);
}

// 验证日期
function validateDate(date) {
  var dateRegex = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
  return dateRegex.test(date);
}

// 验证时间
function validateTime(time) {
  var timeRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;
  return timeRegex.test(time);
}

// 验证整数
function validateInteger(integer) {
  var integerRegex = /^-?\d+$/;
  return integerRegex.test(integer);
}

// 验证小数
function validateDecimal(decimal) {
  var decimalRegex = /^-?\d+\.\d+$/;
  return decimalRegex.test(decimal);
}

// 验证邮政编码
function validatePostalCode(postalCode) {
  var postalCodeRegex = /^\d{6}$/;
  return postalCodeRegex.test(postalCode);
}

错误提示

1. 错误提示的位置

行内提示：在输入框旁边显示错误信息
顶部提示：在表单顶部显示所有错误信息
弹窗提示：使用 alert() 或自定义弹窗显示错误信息
输入框状态：通过输入框的边框颜色、背景色等视觉效果提示错误

2. 错误提示的样式

css

/* 错误提示样式 */
.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

/* 错误输入框样式 */
input.error {
  border: 1px solid red;
  background-color: #fff0f0;
}

/* 成功输入框样式 */
input.success {
  border: 1px solid green;
  background-color: #f0fff0;
}

/* 验证提示样式 */
.validation-message {
  font-size: 12px;
  margin-top: 5px;
}

.validation-message.error {
  color: red;
}

.validation-message.success {
  color: green;
}

3. 错误提示的示例

html

<form id="formWithErrors">
  <div>
    <label for="username">用户名：</label>
    <input
      type="text"
      id="username"
      name="username"
      placeholder="请输入用户名"
    />
    <div id="usernameError" class="error-message"></div>
  </div>
  <div>
    <label for="password">密码：</label>
    <input
      type="password"
      id="password"
      name="password"
      placeholder="请输入密码"
    />
    <div id="passwordError" class="error-message"></div>
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" placeholder="请输入邮箱" />
    <div id="emailError" class="error-message"></div>
  </div>
  <div>
    <input type="submit" value="提交" />
  </div>
</form>

javascript

// 显示错误信息
function showError(elementId, message) {
  var errorElement = document.getElementById(elementId);
  var inputElement = document.getElementById(elementId.replace("Error", ""));

  errorElement.textContent = message;
  inputElement.classList.add("error");
  inputElement.classList.remove("success");
}

// 清除错误信息
function clearError(elementId) {
  var errorElement = document.getElementById(elementId);
  var inputElement = document.getElementById(elementId.replace("Error", ""));

  errorElement.textContent = "";
  inputElement.classList.remove("error");
}

// 显示成功信息
function showSuccess(elementId) {
  var errorElement = document.getElementById(elementId);
  var inputElement = document.getElementById(elementId.replace("Error", ""));

  errorElement.textContent = "验证通过";
  errorElement.classList.add("success");
  errorElement.classList.remove("error");
  inputElement.classList.add("success");
  inputElement.classList.remove("error");
}

// 验证表单
function validateForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var email = document.getElementById("email").value;

  var isValid = true;

  // 验证用户名
  if (!username) {
    showError("usernameError", "请输入用户名");
    isValid = false;
  } else if (username.length < 3) {
    showError("usernameError", "用户名长度至少为 3 位");
    isValid = false;
  } else {
    clearError("usernameError");
  }

  // 验证密码
  if (!password) {
    showError("passwordError", "请输入密码");
    isValid = false;
  } else if (password.length < 6) {
    showError("passwordError", "密码长度至少为 6 位");
    isValid = false;
  } else {
    clearError("passwordError");
  }

  // 验证邮箱
  if (!email) {
    showError("emailError", "请输入邮箱");
    isValid = false;
  } else if (!validateEmail(email)) {
    showError("emailError", "请输入有效的邮箱地址");
    isValid = false;
  } else {
    clearError("emailError");
  }

  return isValid;
}

// 监听表单提交事件
document
  .getElementById("formWithErrors")
  .addEventListener("submit", function (e) {
    if (!validateForm()) {
      e.preventDefault();
    }
  });

// 实时验证
document.getElementById("username").addEventListener("input", function (e) {
  var username = e.target.value;
  if (username) {
    if (username.length >= 3) {
      clearError("usernameError");
    } else {
      showError("usernameError", "用户名长度至少为 3 位");
    }
  } else {
    showError("usernameError", "请输入用户名");
  }
});

document.getElementById("password").addEventListener("input", function (e) {
  var password = e.target.value;
  if (password) {
    if (password.length >= 6) {
      clearError("passwordError");
    } else {
      showError("passwordError", "密码长度至少为 6 位");
    }
  } else {
    showError("passwordError", "请输入密码");
  }
});

document.getElementById("email").addEventListener("input", function (e) {
  var email = e.target.value;
  if (email) {
    if (validateEmail(email)) {
      clearError("emailError");
    } else {
      showError("emailError", "请输入有效的邮箱地址");
    }
  } else {
    showError("emailError", "请输入邮箱");
  }
});

异步验证

1. 什么是异步验证

异步验证是指验证过程需要通过网络请求等异步操作来完成，例如验证用户名是否已存在、邮箱是否已被注册等。

2. 示例：验证用户名是否已存在

javascript

// 异步验证用户名
var usernameInput = document.getElementById("username");
var usernameError = document.getElementById("usernameError");
var isCheckingUsername = false;

usernameInput.addEventListener("input", function (e) {
  var username = e.target.value;

  // 清除之前的超时
  if (usernameInput.timeoutId) {
    clearTimeout(usernameInput.timeoutId);
  }

  // 显示加载状态
  usernameError.textContent = "检查中...";
  usernameError.style.color = "orange";

  // 使用防抖，避免频繁请求
  usernameInput.timeoutId = setTimeout(function () {
    if (username.length >= 3) {
      checkUsernameExists(username);
    } else {
      usernameError.textContent = "用户名长度至少为 3 位";
      usernameError.style.color = "red";
    }
  }, 500);
});

// 检查用户名是否已存在
function checkUsernameExists(username) {
  // 模拟 AJAX 请求
  fetch(
    "https://api.example.com/check-username?username=" +
      encodeURIComponent(username)
  )
    .then((response) => response.json())
    .then((data) => {
      if (data.exists) {
        usernameError.textContent = "用户名已存在";
        usernameError.style.color = "red";
      } else {
        usernameError.textContent = "用户名可用";
        usernameError.style.color = "green";
      }
    })
    .catch((error) => {
      console.error("Error checking username:", error);
      usernameError.textContent = "检查失败，请稍后再试";
      usernameError.style.color = "red";
    });
}

3. 处理并发请求

javascript

// 处理并发请求
var usernameInput = document.getElementById("username");
var usernameError = document.getElementById("usernameError");
var lastRequestId = 0;

usernameInput.addEventListener("input", function (e) {
  var username = e.target.value;
  var currentRequestId = ++lastRequestId;

  if (username.length >= 3) {
    usernameError.textContent = "检查中...";
    usernameError.style.color = "orange";

    // 模拟 AJAX 请求
    setTimeout(function () {
      // 只有当当前请求是最新的请求时才更新 UI
      if (currentRequestId === lastRequestId) {
        if (Math.random() > 0.5) {
          // 模拟用户名已存在
          usernameError.textContent = "用户名已存在";
          usernameError.style.color = "red";
        } else {
          // 模拟用户名可用
          usernameError.textContent = "用户名可用";
          usernameError.style.color = "green";
        }
      }
    }, 1000);
  } else {
    usernameError.textContent = "用户名长度至少为 3 位";
    usernameError.style.color = "red";
  }
});

表单验证库

1. 常见的表单验证库

库名	描述	特点
Validator.js	轻量级的表单验证库	简单易用，支持自定义规则
Parsley.js	基于 HTML5 的表单验证库	声明式验证，支持实时验证
VeeValidate	Vue.js 的表单验证库	专为 Vue 设计，支持组件化
Formik	React 的表单验证库	专为 React 设计，支持表单状态管理
Yup	JavaScript 对象模式验证库	支持链式调用，可与 Formik 配合使用
Joi	Node.js 的对象模式验证库	功能强大，主要用于服务器端验证
express-validator	Express.js 的表单验证中间件	基于 validator.js，专为 Express 设计

2. 使用 Validator.js 示例

javascript

// 安装：npm install validator
const validator = require("validator");

// 验证邮箱
console.log(validator.isEmail("test@example.com")); // true

// 验证手机号（自定义规则）
function isPhone(phone) {
  return /^1[3-9]\d{9}$/.test(phone);
}

console.log(isPhone("13812345678")); // true

// 验证用户名
function isValidUsername(username) {
  return (
    validator.isLength(username, { min: 3, max: 20 }) &&
    /^[a-zA-Z0-9_]+$/.test(username)
  );
}

console.log(isValidUsername("john_doe")); // true

3. 使用 Yup 示例

javascript

// 安装：npm install yup
const yup = require("yup");

// 定义验证模式
const schema = yup.object().shape({
  username: yup
    .string()
    .required("请输入用户名")
    .min(3, "用户名长度至少为 3 位")
    .max(20, "用户名长度不能超过 20 位")
    .matches(/^[a-zA-Z0-9_]+$/, "用户名只能包含字母、数字和下划线"),
  password: yup.string().required("请输入密码").min(6, "密码长度至少为 6 位"),
  email: yup.string().required("请输入邮箱").email("请输入有效的邮箱地址"),
  age: yup
    .number()
    .required("请输入年龄")
    .min(18, "年龄至少为 18 岁")
    .max(100, "年龄不能超过 100 岁"),
});

// 验证数据
schema
  .validate({
    username: "john_doe",
    password: "secret123",
    email: "test@example.com",
    age: 25,
  })
  .then((data) => {
    console.log("Validation passed:", data);
  })
  .catch((error) => {
    console.error("Validation failed:", error.errors);
  });

// 验证失败的情况
schema
  .validate({
    username: "jo", // 长度不足
    password: "123", // 长度不足
    email: "invalid-email", // 邮箱格式错误
    age: 15, // 年龄不足
  })
  .then((data) => {
    console.log("Validation passed:", data);
  })
  .catch((error) => {
    console.error("Validation failed:", error.errors);
  });

最佳实践

1. 客户端验证和服务器端验证结合

客户端验证：提高用户体验，减少服务器负载
服务器端验证：确保数据安全，防止恶意提交

2. 实时验证

对关键字段进行实时验证，如用户名、邮箱等
使用防抖技术，避免频繁验证（如输入时的异步验证）

3. 清晰的错误提示

错误提示应清晰、具体，位于相关字段附近
使用不同的颜色和图标区分错误、警告和成功状态
错误提示应使用用户友好的语言，避免技术术语

4. 可访问性

确保错误提示对屏幕阅读器友好
使用 ARIA 属性标记错误状态
确保表单可以通过键盘导航

5. 性能优化

减少 DOM 操作，批量更新 UI
使用事件委托处理多个表单元素的事件
对频繁触发的事件使用防抖或节流

6. 安全性

不要在客户端验证中包含敏感信息
不要依赖客户端验证来保护数据安全
对输入数据进行适当的转义，防止 XSS 攻击

7. 兼容性

考虑浏览器兼容性，特别是对于 HTML5 内置验证
为不支持某些验证功能的浏览器提供降级方案

8. 测试

测试各种输入情况，包括边界值和异常值
测试表单提交的各种场景
测试异步验证的处理

常见问题及解决方案

1. 表单提交时验证失败但页面仍然刷新

问题：表单验证失败后，页面仍然刷新。

解决方案：在验证失败时调用 e.preventDefault() 阻止表单的默认提交行为。

javascript

document.getElementById("myForm").addEventListener("submit", function (e) {
  if (!validateForm()) {
    e.preventDefault(); // 阻止默认提交行为
  }
});

2. 实时验证导致频繁的 AJAX 请求

问题：实时验证（如检查用户名是否已存在）导致频繁的 AJAX 请求，增加服务器负载。

解决方案：使用防抖技术，延迟验证请求，只有当用户停止输入一段时间后才发送请求。

javascript

var timeoutId;
usernameInput.addEventListener("input", function (e) {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(function () {
    // 发送验证请求
  }, 500);
});

3. HTML5 验证错误信息不友好

问题：HTML5 内置验证的错误信息默认是英文的，不够友好。

解决方案：使用 setCustomValidity() 方法自定义错误信息。

javascript

var emailInput = document.getElementById("email");
emailInput.addEventListener("input", function (e) {
  if (!emailInput.validity.valid) {
    if (emailInput.validity.typeMismatch) {
      emailInput.setCustomValidity("请输入有效的邮箱地址");
    } else {
      emailInput.setCustomValidity("");
    }
  } else {
    emailInput.setCustomValidity("");
  }
});

4. 表单验证通过但提交失败

问题：客户端验证通过，但服务器端验证失败。

解决方案：

确保服务器端验证与客户端验证规则一致
在服务器端验证失败后，返回错误信息并在客户端显示

5. 异步验证与表单提交冲突

问题：表单提交时，异步验证尚未完成，导致验证结果不准确。

解决方案：

在表单提交时检查是否有正在进行的异步验证
只有当所有异步验证都完成后才提交表单

javascript

var isCheckingUsername = false;
var usernameValid = false;

document.getElementById("myForm").addEventListener("submit", function (e) {
  if (isCheckingUsername) {
    e.preventDefault();
    alert("正在验证用户名，请稍后再试");
  } else if (!usernameValid) {
    e.preventDefault();
    alert("请先完成用户名验证");
  }
});

总结

表单验证是前端开发中的重要部分，它可以帮助我们确保用户输入的数据符合预期格式和规则，提高用户体验，减少服务器负载，确保数据安全。

本文介绍了多种表单验证方法，包括：

手动验证：通过 JavaScript 代码手动检查表单元素的值
HTML5 内置验证：使用 HTML5 的验证属性进行验证
实时验证：在用户输入过程中立即进行验证
事件触发验证：在特定事件（如失去焦点）触发时进行验证
异步验证：通过网络请求等异步操作进行验证

同时，我们还介绍了常见的验证规则、错误提示的设计、表单验证库的使用以及最佳实践和常见问题的解决方案。

通过掌握这些表单验证技术，我们可以创建更加用户友好、功能完善、安全可靠的表单，提高网站的整体质量和用户体验。

JavaScript 表单验证 ​

什么是表单验证 ​

表单验证的重要性 ​

客户端验证方法 ​

1. 手动验证 ​

2. HTML5 内置验证 ​

常用的 HTML5 验证属性 ​

示例 ​

自定义错误消息 ​

3. 实时验证 ​

4. 事件触发验证 ​

验证规则 ​

1. 常见验证规则 ​

2. 自定义验证函数 ​

错误提示 ​

1. 错误提示的位置 ​

2. 错误提示的样式 ​

3. 错误提示的示例 ​

异步验证 ​

1. 什么是异步验证 ​

2. 示例：验证用户名是否已存在 ​

3. 处理并发请求 ​

表单验证库 ​

1. 常见的表单验证库 ​

2. 使用 Validator.js 示例 ​

3. 使用 Yup 示例 ​

最佳实践 ​

1. 客户端验证和服务器端验证结合 ​

2. 实时验证 ​

3. 清晰的错误提示 ​

4. 可访问性 ​

5. 性能优化 ​

6. 安全性 ​

7. 兼容性 ​

8. 测试 ​

常见问题及解决方案 ​

1. 表单提交时验证失败但页面仍然刷新 ​

2. 实时验证导致频繁的 AJAX 请求 ​

3. HTML5 验证错误信息不友好 ​

4. 表单验证通过但提交失败 ​

5. 异步验证与表单提交冲突 ​

总结 ​

JavaScript 表单验证

什么是表单验证

表单验证的重要性

客户端验证方法

1. 手动验证

2. HTML5 内置验证

常用的 HTML5 验证属性

示例

自定义错误消息

3. 实时验证

4. 事件触发验证

验证规则

1. 常见验证规则

2. 自定义验证函数

错误提示

1. 错误提示的位置

2. 错误提示的样式

3. 错误提示的示例

异步验证

1. 什么是异步验证

2. 示例：验证用户名是否已存在

3. 处理并发请求

表单验证库

1. 常见的表单验证库

2. 使用 Validator.js 示例

3. 使用 Yup 示例

最佳实践

1. 客户端验证和服务器端验证结合

2. 实时验证

3. 清晰的错误提示

4. 可访问性

5. 性能优化

6. 安全性

7. 兼容性

8. 测试

常见问题及解决方案

1. 表单提交时验证失败但页面仍然刷新

2. 实时验证导致频繁的 AJAX 请求

3. HTML5 验证错误信息不友好

4. 表单验证通过但提交失败

5. 异步验证与表单提交冲突

总结