工作中常用到的JS表单验证代码(包括例子)

2023年6月10日下午6:51 • JavaScript

让我们来详细讲解一下工作中常用到的JS表单验证代码。

1. 前言

在现代Web应用程序中，表单是非常重要的一部分。表单的验证是保证用户数据输入的准确性和安全性的重要手段之一。JavaScript的表单验证是一种常见的方式，能够迅速的检测并提示用户错误输入信息。

2. 表单验证的基本原则

在讲解具体的JS表单验证代码之前，我们先来了解一下表单验证的基本原则。

必填项验证：表单中的必填项必须填写正确的信息，否则需要进行提示。
长度验证：表单中输入的字符数量需要满足特定的范围，例如密码长度需要在6-20之间等等。
格式验证：表单的输入需要符合特定的格式要求，例如手机号码只能输入数字，Email需要包含@符号等等。
数据类型验证：表单中的数字或日期等需要保证类型正确，例如出生日期需要是时间类型，年龄需要是数字类型等等。
一致性验证：表单中的内容需要与其它的表单项保持一致，例如两次密码输入需要一致。

3. 常用表单验证代码示例

下面将通过两个常用的表单验证代码示例来展示如何在实际开发中使用JS实现表单验证的功能。

示例1：密码必须包含数字和字母

<form id="registerForm">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"/>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"/>
  </div>
  <div>
    <label for="password-confirm">确认密码：</label>
    <input type="password" id="password-confirm" name="password-confirm"/>
  </div>
  <button type="submit">注册</button>
</form>

document.querySelector('#registerForm').addEventListener('submit', function(event) {
  event.preventDefault();

  const username = document.querySelector('#username').value.trim();
  const password = document.querySelector('#password').value.trim();
  const confirmPassword = document.querySelector('#password-confirm').value.trim();

  if (!username) {
    alert('用户名不能为空');
    return;
  }

  if (!password) {
    alert('密码不能为空');
    return;
  }

  if (password.length < 6 || password.length > 20) {
    alert('密码长度需要在6-20之间');
    return;
  }

  if (!/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]/.test(password)) {
    alert('密码必须包含数字和字母');
    return;
  }

  if (password !== confirmPassword) {
    alert('确认密码需要与密码一致');
    return;
  }

  alert('注册成功');
});

在上面的示例中，我们通过针对表单的ID值和判断submit表单事件的方式获取了表单中的用户名、密码、确认密码等参数，然后分别进行了必填项验证、格式验证、长度验证等操作。其中，检测密码是否包含数字和字母这一部分使用了正则表达式进行了实现。

示例2：邮箱验证

<form id="subscribeForm">
  <div>
    <label for="email">邮箱地址：</label>
    <input type="text" id="email" name="email" />
  </div>
  <button type="submit">订阅</button>
</form>

document.querySelector('#subscribeForm').addEventListener('submit', function(event) {
  event.preventDefault();

  const email = document.querySelector('#email').value.trim();

  if (!email) {
    alert('请输入正确的邮箱地址');
    return;
  }

  if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(email)) {
    alert('邮箱格式不正确');
    return;
  }

  alert('感谢您的订阅');
});

在上面示例中，我们先获取了表单中的邮箱地址，并进行了必填项验证和格式验证，这里使用了常见的邮箱地址正则表达式验证方式，验证通过后则进行提交动作。