js实现表单验证

表单验证的基本方法

使用JavaScript进行表单验证可以确保用户输入的数据符合预期要求。常见的验证包括非空检查、格式验证、长度限制等。

HTML结构示例

<form id="myForm">
  <input type="text" id="username" placeholder="用户名">
  <input type="email" id="email" placeholder="邮箱">
  <input type="password" id="password" placeholder="密码">
  <button type="submit">提交</button>
</form>
<div id="error"></div>

非空验证

检查输入字段是否为空是最基本的验证。通过监听表单的提交事件，阻止默认提交行为并进行验证。

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  const errorElement = document.getElementById('error');

  if (!username || !email || !password) {
    errorElement.textContent = '所有字段必须填写';
    return;
  }
  errorElement.textContent = '';
  this.submit();
});

格式验证

对特定字段进行格式验证，例如邮箱格式或密码强度。使用正则表达式可以高效完成这类验证。

function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const email = document.getElementById('email').value;
  const errorElement = document.getElementById('error');

  if (!validateEmail(email)) {
    errorElement.textContent = '请输入有效的邮箱地址';
    return;
  }
  errorElement.textContent = '';
  this.submit();
});

实时验证

在用户输入时实时验证字段，提供即时反馈。通过监听输入事件实现。

document.getElementById('email').addEventListener('input', function() {
  const email = this.value;
  const errorElement = document.getElementById('error');

  if (!validateEmail(email)) {
    errorElement.textContent = '请输入有效的邮箱地址';
  } else {
    errorElement.textContent = '';
  }
});

自定义验证规则

为特定需求定义自定义验证规则，例如密码必须包含大小写字母和数字。

function validatePassword(password) {
  const re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
  return re.test(password);
}

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const password = document.getElementById('password').value;
  const errorElement = document.getElementById('error');

  if (!validatePassword(password)) {
    errorElement.textContent = '密码必须包含大小写字母和数字，且长度至少8位';
    return;
  }
  errorElement.textContent = '';
  this.submit();
});

综合验证示例

将上述验证方法综合起来，创建一个完整的表单验证逻辑。

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  const errorElement = document.getElementById('error');

  if (!username || !email || !password) {
    errorElement.textContent = '所有字段必须填写';
    return;
  }

  if (!validateEmail(email)) {
    errorElement.textContent = '请输入有效的邮箱地址';
    return;
  }

  if (!validatePassword(password)) {
    errorElement.textContent = '密码必须包含大小写字母和数字，且长度至少8位';
    return;
  }

  errorElement.textContent = '';
  alert('表单验证通过，即将提交');
  this.submit();
});

通过以上方法，可以实现灵活且强大的表单验证功能，确保用户输入的数据符合要求。