前端表单验证策略与最佳实践

问题总结：

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

正确的做法

基本验证策略

// 1. 实时验证
function setupRealTimeValidation() {
  const emailInput = document.getElementById('email');
  const passwordInput = document.getElementById('password');
  const confirmPasswordInput = document.getElementById('confirm-password');
  
  emailInput.addEventListener('input', validateEmail);
  passwordInput.addEventListener('input', validatePassword);
  confirmPasswordInput.addEventListener('input', validateConfirmPassword);
}

function validateEmail() {
  const email = this.value;
  const errorElement = this.nextElementSibling;
  if (!email) {
    errorElement.textContent = 'Email is required';
    this.classList.add('error');
  } else if (!isValidEmail(email)) {
    errorElement.textContent = 'Invalid email format';
    this.classList.add('error');
  } else {
    errorElement.textContent = '';
    this.classList.remove('error');
  }
}

function validatePassword() {
  const password = this.value;
  const errorElement = this.nextElementSibling;
  if (!password) {
    errorElement.textContent = 'Password is required';
    this.classList.add('error');
  } else if (password.length < 8) {
    errorElement.textContent = 'Password must be at least 8 characters';
    this.classList.add('error');
  } else {
    errorElement.textContent = '';
    this.classList.remove('error');
  }
}

function validateConfirmPassword() {
  const confirmPassword = this.value;
  const password = document.getElementById('password').value;
  const errorElement = this.nextElementSibling;
  if (!confirmPassword) {
    errorElement.textContent = 'Please confirm your password';
    this.classList.add('error');
  } else if (confirmPassword !== password) {
    errorElement.textContent = 'Passwords do not match';
    this.classList.add('error');
  } else {
    errorElement.textContent = '';
    this.classList.remove('error');
  }
}

// 2. 表单提交验证
function handleSubmit(e) {
  e.preventDefault();
  const isValid = validateForm();
  if (isValid) { /* 提交表单 */ }
}

function validateForm() {
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirm-password').value;
  let isValid = true;

  if (!email) { setError('email', 'Email is required'); isValid = false; }
  else if (!isValidEmail(email)) { setError('email', 'Invalid email format'); isValid = false; }
  else { clearError('email'); }

  if (!password) { setError('password', 'Password is required'); isValid = false; }
  else if (password.length < 8) { setError('password', 'Password must be at least 8 characters'); isValid = false; }
  else { clearError('password'); }

  if (!confirmPassword) { setError('confirm-password', 'Please confirm your password'); isValid = false; }
  else if (confirmPassword !== password) { setError('confirm-password', 'Passwords do not match'); isValid = false; }
  else { clearError('confirm-password'); }

  return isValid;
}

function setError(fieldId, message) {
  const field = document.getElementById(fieldId);
  const errorElement = field.nextElementSibling;
  errorElement.textContent = message;
  field.classList.add('error');
}

function clearError(fieldId) {
  const field = document.getElementById(fieldId);
  const errorElement = field.nextElementSibling;
  errorElement.textContent = '';
  field.classList.remove('error');
}

使用表单验证库

// 1. 使用 Yup
import * as Yup from 'yup';

const schema = Yup.object({
  email: Yup.string().email('Invalid email format').required('Email is required'),
  password: Yup.string().min(8, 'Password must be at least 8 characters').required('Password is required'),
  confirmPassword: Yup.string().oneOf([Yup.ref('password'), null], 'Passwords must match').required('Please confirm your password')
});

async function validateForm(data) {
  try {
    await schema.validate(data, { abortEarly: false });
    return { isValid: true, errors: {} };
  } catch (error) {
    const errors = {};
    error.inner.forEach(err => { errors[err.path] = err.message; });
    return { isValid: false, errors };
  }
}

// 2. 使用 Formik + Yup
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  email: Yup.string().email('Invalid email format').required('Email is required'),
  password: Yup.string().min(8, 'Password must be at least 8 characters').required('Password is required'),
  confirmPassword: Yup.string().oneOf([Yup.ref('password'), null], 'Passwords must match').required('Please confirm your password')
});

function LoginForm() {
  return (
    <Formik initialValues={{ email: '', password: '', confirmPassword: '' }} validationSchema={validationSchema} onSubmit={(values) => { console.log(values); }}>
      {({ errors, touched }) => (
        <Form>
          <div>
            <label htmlFor="email">Email</label>
            <Field type="email" name="email" />
            {errors.email && touched.email && <div className="error">{errors.email}</div>}
          </div>
          <div>
            <label htmlFor="password">Password</label>
            <Field type="password" name="password" />
            {errors.password && touched.password && <div className="error">{errors.password}</div>}
          </div>
          <div>
            <label htmlFor="confirmPassword">Confirm Password</label>
            <Field type="password" name="confirmPassword" />
            {errors.confirmPassword && touched.confirmPassword && <div className="error">{errors.confirmPassword}</div>}
          </div>
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

// 3. 使用 React Hook Form
import React from 'react';
import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => { console.log(data); };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="email">Email</label>
        <input type="email" {...register('email', { required: 'Email is required', pattern: { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'Invalid email format' } })} />
        {errors.email && <div className="error">{errors.email.message}</div>}
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input type="password" {...register('password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} />
        {errors.password && <div className="error">{errors.password.message}</div>}
      </div>
      <div>
        <label htmlFor="confirmPassword">Confirm Password</label>
        <input type="password" {...register('confirmPassword', { required: 'Please confirm your password', validate: (value, formValues) => value === formValues.password || 'Passwords do not match' })} />
        {errors.confirmPassword && <div className="error">{errors.confirmPassword.message}</div>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

最佳实践

1. 分层验证：前端验证（基本验证、实时反馈）+ 后端验证（完整验证、安全检查）。
2. 验证规则配置化：将验证规则提取为配置对象，便于维护和复用。

   const validationRules = {
     email: { required: 'Email is required', pattern: { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'Invalid email format' } },
     password: { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } }
   };
   

3. 自定义验证规则：根据具体业务需求编写验证函数。

   function validateUsername(username) {
     if (!username) return 'Username is required';
     if (username.length < 3) return 'Username must be at least 3 characters';
     if (username.length > 20) return 'Username must be at most 20 characters';
     if (!/^[a-zA-Z0-9_]+$/.test(username)) return 'Username can only contain letters, numbers, and underscores';
     return '';
   }
   

4. 异步验证：检查唯一性（如邮箱是否已存在）。

   async function validateEmail(email) {
     if (!email) return 'Email is required';
     if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return 'Invalid email format';
     const response = await fetch(`/api/check-email?email=${email}`);
     const data = await response.json();
     if (data.exists) return 'Email already exists';
     return '';
   }
   

5. 可访问性：使用 ARIA 属性增强无障碍支持。

   function AccessibleForm() {
     return (
       <form>
         <div>
           <label htmlFor="email">Email</label>
           <input type="email" aria-required="true" aria-invalid={errors.email ? 'true' : 'false'} aria-describedby={errors.email ? 'email-error' : undefined} />
           {errors.email && <div id="email-error" className="error">{errors.email}</div>}
         </div>
       </form>
     );
   }