为前端保驾护航——JS 常用验证工具大盘点

2023-11-18 18:43:44







作为一名前端开发人员，你一定遇到过需要对用户输入的数据进行验证的情况。无论是表单提交、数据查询还是其他交互操作，准确的数据是保证程序正常运行的基础。

为了帮助你轻松应对各种验证场景，本文将盘点几种常见的 JS 验证工具，并详细介绍它们的用法和优势。

## 1. 正则表达式

正则表达式（Regular Expression，简称 Regex）是一种用于匹配字符串的强大工具。它可以帮助你验证各种格式的数据，如电子邮件地址、电话号码、身份证号码等。

```javascript
// 验证电子邮件地址
function isValidEmail(email) {
  const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

// 验证电话号码
function isValidPhoneNumber(phoneNumber) {
  const re = /^1[3-9]\d{9}$/;
  return re.test(phoneNumber);
}

// 验证身份证号码
function isValidIdNumber(idNumber) {
  const re = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  return re.test(idNumber);
}

2. Lodash

Lodash 是一个功能丰富的 JavaScript 库，提供了各种实用工具，其中就包括数据验证功能。

// 验证是否为空
function isEmpty(value) {
  return _.isEmpty(value);
}

// 验证是否为数字
function isNumber(value) {
  return _.isNumber(value);
}

// 验证是否为布尔值
function isBoolean(value) {
  return _.isBoolean(value);
}

3. Yup

Yup 是一个专注于数据验证的 JavaScript 库，它提供了丰富的验证规则和直观的 API，可以轻松实现各种复杂的数据验证场景。

// 创建一个验证模式
const schema = yup.object().shape({
  email: yup.string().email().required(),
  phoneNumber: yup.string().required().min(11).max(11),
  idNumber: yup.string().required().length(18),
});

// 使用模式验证数据
try {
  const data = await schema.validate({
    email: 'test@example.com',
    phoneNumber: '13800138000',
    idNumber: '33010119900101123X',
  });
  console.log(data); // { email: 'test@example.com', phoneNumber: '13800138000', idNumber: '33010119900101123X' }
} catch (error) {
  console.error(error);
}