JS表单验证怎么实现_JS前端表单验证方法与实例教程

<form id="registerForm">
  <input type="text" id="username" placeholder="用户名" required><br>
  <input type="email" id="email" placeholder="邮箱" required><br>
  <input type="password" id="password" placeholder="密码" required><br>
  <input type="password" id="confirmPassword" placeholder="确认密码" required><br>
  <button type="submit">注册</button>
</form>

<script>
document.getElementById('registerForm').addEventListener('submit', function(e) {
  let valid = true;
  const username = document.getElementById('username').value.trim();
  const email = document.getElementById('email').value.trim();
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirmPassword').value;

  // 用户名不能为空
  if (username === '') {
    alert('请输入用户名');
    valid = false;
  }

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

  // 密码至少6位
  if (password.length < 6) {
    alert('密码至少6位');
    valid = false;
  }

  // 确认密码
  if (password !== confirmPassword) {
    alert('两次密码不一致');
    valid = false;
  }

  // 阻止表单提交
  if (!valid) {
    e.preventDefault();
  }
});
</script>

document.getElementById('email').addEventListener('blur', function() {
  const email = this.value;
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    this.style.borderColor = 'red';
  } else {
    this.style.borderColor = 'green';
  }
});

<input type="text" pattern="[0-9]{11}" title="请输入11位手机号" required>

if (document.getElementById('myForm').checkValidity()) {
  // 验证通过
} else {
  // 显示默认提示或自定义处理
}