前端表单验证策略：防止无效数据提交

前端表单验证策略：防止无效数据提交

毒舌时刻

表单验证？听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便加个 required 属性就能解决所有验证问题？别做梦了！到时候你会发现，用户输入的垃圾数据还是会被提交到服务器。

你以为用正则表达式就能验证所有输入？别天真了！正则表达式的复杂度能让你崩溃，维护起来比业务代码还麻烦。还有那些所谓的表单验证库，看起来高大上，用起来却各种问题。

为什么你需要这个

1. 提高数据质量：良好的表单验证可以确保用户输入的数据符合要求，提高数据质量。
2. 改善用户体验：实时的表单验证可以及时反馈用户输入的错误，改善用户体验。
3. 减少服务器负担：在前端进行验证可以减少无效请求，减轻服务器负担。
4. 提高安全性：表单验证可以防止恶意输入，提高应用的安全性。
5. 符合业务规则：表单验证可以确保用户输入符合业务规则，减少业务错误。

反面教材

// 1. 仅使用 HTML5 验证
<form>
  <input type="email" required>
  <input type="password" required minlength="8">
  <button type="submit">Submit</button>
</form>

// 2. 验证逻辑混乱
function validateForm() {
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirm-password').value;
  if (!email) {
    alert('Email is required');
    return false;
  }
  if (!isValidEmail(email)) {
    alert('Invalid email');
    return false;
  }
  if (!password) {
    alert('Password is required');
    return false;
  }
  if (password.length < 8) {
    alert('Password must be at least 8 characters');
    return false;
  }
  if (password !== confirmPassword) {
    alert('Passwords do not match');
    return false;
  }
  return true;
}

// 3. 缺少实时验证
function handleSubmit(e) {
  e.preventDefault();
  if (validateForm()) {
    // 提交表单
  }
}

// 4. 验证错误提示不友好
<input type="email" required>
<div>Please enter a valid email</div>

// 5. 过度验证
function validatePassword(password) {
  if (password.length < 8) {
    return 'Password must be at least 8 characters';
  }
  if (!/[A-Z]/.test(password)) {
    return 'Password must contain at least one uppercase letter';
  }
  if (!/[a-z]/.test(password)) {
    return 'Password must contain at least one lowercase letter';
  }
  if (!/[0-9]/.test(password)) {
    return 'Password must contain at least one number';
  }
  if (!/[!@#$%^&*]/.test(password)) {
    return 'Password must contain at least one special character';
  }
  return '';
}

问题：

• 仅使用 HTML5 验证，无法处理复杂的验证逻辑
• 验证逻辑混乱，难以维护
• 缺少实时验证，用户体验差
• 验证错误提示不友好，影响用户体验
• 过度验证，增加用户负担

正确的做法

基本验证策略

// 1. 实时验证
 () {
   emailInput = .();
   passwordInput = .();
   confirmPasswordInput = .();
  emailInput.(, validateEmail);
  passwordInput.(, validatePassword);
  confirmPasswordInput.(, validateConfirmPassword);
}

 () {
   email = .;
   errorElement = .;
   (!email) {
    errorElement. = ;
    ..();
  }   (!(email)) {
    errorElement. = ;
    ..();
  }  {
    errorElement. = ;
    ..();
  }
}

 () {
   password = .;
   errorElement = .;
   (!password) {
    errorElement. = ;
    ..();
  }   (password. < ) {
    errorElement. = ;
    ..();
  }  {
    errorElement. = ;
    ..();
  }
}

 () {
   confirmPassword = .;
   password = .().;
   errorElement = .;
   (!confirmPassword) {
    errorElement. = ;
    ..();
  }   (confirmPassword !== password) {
    errorElement. = ;
    ..();
  }  {
    errorElement. = ;
    ..();
  }
}


 () {
  e.();
   isValid = ();
   (isValid) {
    
  }
}

 () {
   email = .().;
   password = .().;
   confirmPassword = .().;
   isValid = ;
   (!email) {
    (, );
    isValid = ;
  }   (!(email)) {
    (, );
    isValid = ;
  }  {
    ();
  }
   (!password) {
    (, );
    isValid = ;
  }   (password. < ) {
    (, );
    isValid = ;
  }  {
    ();
  }
   (!confirmPassword) {
    (, );
    isValid = ;
  }   (confirmPassword !== password) {
    (, );
    isValid = ;
  }  {
    ();
  }
   isValid;
}

 () {
   field = .(fieldId);
   errorElement = field.;
  errorElement. = message;
  field..();
}

 () {
   field = .(fieldId);
   errorElement = field.;
  errorElement. = ;
  field..();
}