js 正则验证|极客笔记

js 正则验证

在前端开发中，经常会用到正则表达式来进行数据的验证。通过正则表达式，我们可以很方便地对用户输入的数据进行格式校验，确保数据的准确性和完整性。本文将详细介绍在JavaScript中使用正则表达式进行验证的相关知识。

什么是正则表达式

正则表达式（Regular Expression）是一种用来匹配字符串的模式。它是由普通字符和特殊字符（元字符）组成的表达式。通过正则表达式，我们可以方便地进行字符串的匹配、查找、替换等操作。

正则表达式的基本语法

正则表达式由两部分组成：普通字符和元字符。普通字符就是普通的字符，例如字母、数字、空格等；元字符则是一些特殊的字符，用来表示匹配规则。

下面是一些常用的元字符：

.：匹配任意字符，除了换行符（\n、\r）之外
^：匹配字符串的开头
$：匹配字符串的结尾
*：匹配前面的字符零次或多次
+：匹配前面的字符一次或多次
?：匹配前面的字符零次或一次
\d：匹配数字字符，等价于 [0-9]
\w：匹配字母、数字和下划线，等价于 [A-Za-z0-9_]
\s：匹配空白字符，包括空格、制表符、换行符等
[]：匹配括号内的任意一个字符
()：定义一个子模式，可以通过引用来重复使用
|：或运算符，用来匹配多个模式中的任意一个

使用正则表达式进行验证

邮箱验证

邮箱的格式一般是 xxx@xxx.xxx，其中 @ 前面可以是字母、数字、下划线、点号，后面可以是字母、数字、点号，再接上一个点和两到三个字母。下面是一个简单的邮箱验证正则表达式：

const emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

使用正则表达式进行验证：

const isEmail = (email) => {
  return emailReg.test(email);
};

console.log(isEmail('example@mail.com')); // true
console.log(isEmail('example@.com')); // false

手机号码验证

手机号码的格式一般是 11 位数字，开头是 1，后面可以是 3、4、5、7、8、9 中的任意一个数字。下面是一个简单的手机号码验证正则表达式：

const phoneReg = /^1[345789]\d{9}$/;

使用正则表达式进行验证：

const isPhone = (phone) => {
  return phoneReg.test(phone);
};

console.log(isPhone('13812345678')); // true
console.log(isPhone('1881234567')); // false

身份证号码验证

身份证号码的格式一般是 18 位数字，前面有 17 位数字，最后一位可以是数字或字母（X）。下面是一个简单的身份证号码验证正则表达式：

const idCardReg = /^\d{17}[\dX]$/;

使用正则表达式进行验证：

const isIdCard = (idCard) => {
  return idCardReg.test(idCard);
};

console.log(isIdCard('110101199001011234')); // true
console.log(isIdCard('11010119900101123X')); // true
console.log(isIdCard('11010119900101123')); // false

在表单验证中的应用

在实际开发中，正则表达式经常用来进行表单验证。下面是一个简单的示例代码，实现了一个基本的注册表单验证：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Validation</title>
</head>
<body>
  <form id="registerForm">
    <input type="text" id="email" placeholder="Email">
    <input type="text" id="phone" placeholder="Phone">
    <input type="text" id="idCard" placeholder="ID Card">
    <button type="submit">Register</button>
  </form>

  <script>
    const emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* $/; const phoneReg = /^1[345789]\d{9}$ /;
    const idCardReg = /^\d{17}[\dX]$/;

    const registerForm = document.getElementById('registerForm');

    registerForm.addEventListener('submit', function(e) {
      e.preventDefault();

      const email = document.getElementById('email').value;
      const phone = document.getElementById('phone').value;
      const idCard = document.getElementById('idCard').value;

      if (!emailReg.test(email)) {
        alert('Please enter a valid email address');
        return;
      }

      if (!phoneReg.test(phone)) {
        alert('Please enter a valid phone number');
        return;
      }

      if (!idCardReg.test(idCard)) {
        alert('Please enter a valid ID card number');
        return;
      }

      alert('Registration successful!');
    });
  </script>
</body>
</html>

以上代码实现了一个简单的注册表单验证，通过正则表达式对邮箱、手机号、身份证号进行了格式校验，确保用户输入的数据符合规范。当用户输入不符合规范的数据时，会弹出相应的提示信息，反馈给用户。