大家好，我是寒草 🌿 无限未来，无限创造，乘风破浪，一往无前 ☀️ 如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~ 加我微信：hancao97，邀你进群，一起学习交流，成为更优秀的工程师～

背景

最近的工作接触了很多前端校验相关的内容，其中涉及最多的开源 npm 包便是： validator.js，在这个过程中也有了一些自己的思考，于是我基于 validator.js 开发了一个新的 npm 包：pro-validator。

在此期望通过这篇文章向大家阐述我的思考并向各位介绍 pro-validator 的消费方式，现在这个包也只是我在十月一假期闲暇时间实现的最初版本，虽还需要完善扩充更多能力，但基础能力已经具备，也请各位不吝赐教。

关于 validator 的思考

与其说是思考，不如说是我创建这个 npm 包的原因。首先，请大家思考这样一个问题：

大家一般都在什么场景使用 validator ？

我凭自己粗浅的认知体系去思考这个问题，答案应该是：Form 表单。然而，当我们在表单场景去使用 validator 的时候，我们总是需要在 validator 的回调函数中添加错误提示，比如：

请输入合法的邮箱地址！

并且，现如今，在我们实现一个 Form 的过程中，我们我们总是会使用一些 ui 组件库，比如：Ant Design。然而，在使用这些组件库的过程中，我们会发现：

validator 校验库（validator.js）和 ui 组件库（Ant Design）对 validator 这个术语的定义是存在差异的。

• validator 校验库导出的：

validator.isXXX //return true 或者 false

• ui 组件库需要的

validator.XXX // return 错误信息 

于是，这个 npm 包诞生了。通过它，我们提供了一个名字是 judger 的校验库用于判断字符串是否合规，同时我们还提供了一个名为 generator 的方法去自定义 judger 以及 ui 组件库需要的 validator。

此处对于 judger 的定义我想了很多术语，包括：assert，但是经过一些调研了思考，我还是选择了带有法官含义的 judger 一词。

使用指南

judger

可以直接使用 validator.js 中 is 开头的方法。

并且额外新增了以下几个方法:

• isLatitude(str)
• isLongitude(str)
• isName(str, options)

isName 的 options 如下：

name	desc	default value
min	最小长度	0
max	最大长度	Infinity
white	白名单	[]
black	黑名单	[]
caital	是否支持 A-Z	true
lowercase	是否支持 a-z	true
number	是否支持 0-9	true
chinese	是否支持中文汉字：\u4e00-\u9fa5	true

使用方式如下：

import { judger } from 'pro-validator';
judger.isEmail('1234567890'); // false

generator

使用方式如下：

import { judger, generator } from 'pro-validator';
const configs = {
  judger: [{
    name: 'isName8To64',
    func: (str) => judger.isName(str, { min: 8, max: 64 })
  }
  }],
  validator: [{
    name: 'name8To64',
    judgers: ['isName8To64'], // 支持多个 judger
    messages: ['Please try again!'] // 支持多个错误提示，需要和 judger 一一对应
  }]
};
const { judger, validator } = generator(configs);

结束语

到此本篇文章就结束了，很久没有写文章了，主要原因还是最近工作比较繁忙，十月一又躺平歇了一周现在整个人就比较懈。

但是想着很快也会再次相聚，各位读者朋友们，再见喽，同时祝大家工作顺利～

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

凡事以理想为因，实行为果 愿诸君一路前行，从不孤独

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

欢迎各位加我微信：hancao97，与我一起交流成长。

-To Be Continued && Hello World-