JS使用正则表达式实现常用的表单验证功能分析

这里我提供一份完整的攻略来实现用正则表达式实现常用的表单验证功能。步骤如下：

步骤一：准备HTML代码

首先，我们需要编写一个表单来进行验证。HTML代码如下：

<form method="post" action="" id="myForm">
  <label for="username">用户名：</label>
  <input type="text" name="username" id="username" required><br>

  <label for="email">邮箱：</label>
  <input type="email" name="email" id="email" required><br>

  <label for="password">密码：</label>
  <input type="password" name="password" id="password" required><br>

  <label for="password_confirm">确认密码：</label>
  <input type="password" name="password_confirm" id="password_confirm" required><br>

  <input type="submit" value="提交">
</form>

步骤二：编写JavaScript代码

然后，我们需要编写一些JavaScript代码来进行验证。

验证用户名

我们需要验证用户名是否符合以下规则：

• 3-16个字符
• 只能包含字母、数字、下划线

代码如下：

function validateUsername() {
  const username = document.getElementById('username').value;
  const re = /^[a-zA-Z0-9_]{3,16}$/;
  if (!re.test(username)) {
    // 验证不通过
    console.log('用户名格式不正确');
    return false;
  }
  return true;
}

验证邮箱

我们需要验证邮箱是否符合以下规则：

• 必须包含一个@字符
• @字符之前的部分至少有一个字符
• @字符之后的部分必须包含一个.字符
• .字符后面必须有两个或以上的字符

代码如下：

function validateEmail() {
  const email = document.getElementById('email').value;
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
  if (!re.test(email)) {
    // 验证不通过
    console.log('邮箱格式不正确');
    return false;
  }
  return true;
}

验证密码

我们需要验证密码是否符合以下规则：

• 6-20个字符
• 必须包含至少一个大写字母、至少一个小写字母和至少一个数字

代码如下：

function validatePassword() {
  const password = document.getElementById('password').value;
  const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\w\W]{6,20}$/;
  if (!re.test(password)) {
    // 验证不通过
    console.log('密码格式不正确');
    return false;
  }
  return true;
}

验证确认密码

我们需要验证确认密码是否与密码相同。

代码如下：

function validatePasswordConfirm() {
  const password = document.getElementById('password').value;
  const password_confirm = document.getElementById('password_confirm').value;
  if (password !== password_confirm) {
    // 验证不通过
    console.log('确认密码与密码不一致');
    return false;
  }
  return true;
}

绑定表单提交事件

最后，我们需要绑定表单提交事件，来进行所有的验证。

代码如下：

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  if (!validateUsername() || !validateEmail() || !validatePassword() || !validatePasswordConfirm()) {
    event.preventDefault();
    // 阻止表单提交
  }
});

示例

示例1

假设用户输入的用户名为"abc123"，邮箱为"abc"，密码为"12345"，确认密码为"123456"，则在表单提交时，控制台会输出以下内容：

邮箱格式不正确
密码格式不正确
确认密码与密码不一致

因此，表单将不会被提交。

示例2

假设用户输入的用户名为"abcdef"，邮箱为"[e-mail]"，密码为"Abc123"，确认密码为"Abc123"，则在表单提交时，控制台不会输出任何内容，并且表单将会被成功提交。