JavaScript表单验证实战：手写一个常见的用户注册页面校验逻辑

表单验证的基本结构

HTML部分创建注册表单，包含用户名、密码、确认密码和邮箱字段。为每个输入字段添加required属性确保非空校验，并设置pattern属性进行初步验证。

<form id="registerForm">
  <div>
    <label for="username">用户名</label>
    <input type="text" id="username" required minlength="4" maxlength="16">
    <span class="error" id="usernameError"></span>
  </div>
  
  <div>
    <label for="password">密码</label>
    <input type="password" id="password" required minlength="8">
    <span class="error" id="passwordError"></span>
  </div>

  <div>
    <label for="confirmPassword">确认密码</label>
    <input type="password" id="confirmPassword" required>
    <span class="error" id="confirmPasswordError"></span>
  </div>

  <div>
    <label for="email">邮箱</label>
    <input type="email" id="email" required>
    <span class="error" id="emailError"></span>
  </div>

  <button type="submit">注册</button>
</form>

实时输入验证

为每个输入字段添加input事件监听器，在用户输入时实时验证。使用正则表达式进行格式校验，用户名只允许字母数字和下划线，密码需包含大小写和数字。

document.getElementById('username').addEventListener('input', function() {
  const username = this.value;
  const errorElement = document.getElementById('usernameError');
  const regex = /^[a-zA-Z0-9_]+$/;
  
  if (!regex.test(username)) {
    errorElement.textContent = '用户名只能包含字母、数字和下划线';
  } else {
    errorElement.textContent = '';
  }
});

document.getElementById('password').addEventListener('input', function() {
  const password = this.value;
  const errorElement = document.getElementById('passwordError');
  const hasUpper = /[A-Z]/.test(password);
  const hasLower = /[a-z]/.test(password);
  const hasNumber = /[0-9]/.test(password);
  
  if (!hasUpper || !hasLower || !hasNumber) {
    errorElement.textContent = '密码需包含大小写字母和数字';
  } else {
    errorElement.textContent = '';
  }
});

表单提交验证

拦截表单的submit事件，进行最终验证。检查确认密码是否匹配，邮箱格式是否正确。所有验证通过后才允许提交。

document.getElementById('registerForm').addEventListener('submit', function(e) {
  e.preventDefault();
  let isValid = true;

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirmPassword').value;
  const email = document.getElementById('email').value;

  // 用户名验证
  if (username.length < 4) {
    document.getElementById('usernameError').textContent = '用户名至少4个字符';
    isValid = false;
  }

  // 密码验证
  if (password.length < 8) {
    document.getElementById('passwordError').textContent = '密码至少8个字符';
    isValid = false;
  }

  // 确认密码验证
  if (password !== confirmPassword) {
    document.getElementById('confirmPasswordError').textContent = '两次密码不一致';
    isValid = false;
  }

  // 邮箱验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    document.getElementById('emailError').textContent = '请输入有效的邮箱地址';
    isValid = false;
  }

  if (isValid) {
    // 表单验证通过，执行提交逻辑
    console.log('表单验证通过');
    // this.submit(); // 实际提交表单
  }
});

验证反馈样式

为错误信息添加CSS样式，提高用户体验。错误信息使用红色显示，并在验证通过时清除错误提示。

.error {
  color: red;
  font-size: 0.8em;
  display: block;
  margin-top: 5px;
}

input:invalid {
  border-color: red;
}

input:valid {
  border-color: green;
}

异步用户名检查

对于需要服务器验证的用户名是否已存在，可以使用fetchAPI进行异步检查。在用户名输入框失去焦点时触发检查。

document.getElementById('username').addEventListener('blur', function() {
  const username = this.value;
  const errorElement = document.getElementById('usernameError');
  
  if (username.length >= 4) {
    fetch(`/api/check-username?username=${username}`)
      .then(response => response.json())
      .then(data => {
        if (data.exists) {
          errorElement.textContent = '用户名已存在';
        }
      });
  }
});