前端表单验证提速：validator.js 深度实战
为什么选 validator.js？
validator.js 把常用校验逻辑拆成独立函数，每个函数只有几 KB，零依赖、按需加载，天然适合现代打包工具。社区持续维护，边界用例（如国际化域名、IPv6）都已覆盖，省去手写正则的麻烦。
三步集成
-
安装
或浏览器端直接引入 CDN：npm i validator<script src="https://unpkg.com/validator@latest/validator.min.js"></script> -
按需引入
import isEmail from 'validator/lib/isEmail'; import isURL from 'validator/lib/isURL'; import isIP from 'validator/lib/isIP'; -
一行调用
console.log(isEmail('张三@公司.中国')); // true console.log(isURL('//localhost:3000', { require_protocol: false })); // true console.log(isIP('2001:db8::1')); // true
性能优化 5 招
1. 精准导入
只引入用到的函数，Webpack/Rollup 会自动摇树，减少 40 KB+ 体积。
// ✅ 推荐
import isMobilePhone from 'validator/lib/isMobilePhone';
// ❌ 不推荐
import validator from 'validator';2. 防抖校验
输入框实时校验时，用防抖避免高频计算：
import { debounce } from 'lodash-es';
import isEmail from 'validator/lib/isEmail';
const handleInput = debounce((val) => {
const ok = isEmail(val);
setError(ok ? '' : '邮箱格式错误');
}, 300);
input.addEventListener('input', e => handleInput(e.target.value));3. 前后端共用规则
把校验函数抽成共享包，Node 与浏览器复用，避免规则漂移：
// shared/validators.js
export const rules = {
email: (v) => isEmail(v),
phone: (v) => isMobilePhone(v, 'zh-CN')
};4. 组合校验
链式组合多个函数，满足复杂场景：
import isLength from 'validator/lib/isLength';
import isAlphanumeric from 'validator/lib/isAlphanumeric';
const validUser = (name) =>
isLength(name, { min: 3, max: 20 }) && isAlphanumeric(name);5. TypeScript 加持
官方自带 .d.ts，编译期即可发现类型错误：
function checkEmail(input: string): boolean {
return isEmail(input); // 若传 number 会报错
}高频场景示例
邮箱白名单
const allowList = ['company.com', 'group.cn'];
isEmail('user@company.com', { host_whitelist: allowList }); // trueURL 协议可选
isURL('example.com', { require_protocol: false }); // true身份证地区化
import isIdentityCard from 'validator/lib/isIdentityCard';
isIdentityCard('110101199001011234', 'zh-CN'); // 大陆身份证
isIdentityCard('A123456789', 'any'); // 通用格式测试与贡献
仓库自带 Jest 用例，新增校验逻辑只需在 src 写函数，test 目录补测试，提 PR 即可。
