pro-validator｜对前端校验的思考

大家好，我是寒草 🌿

无限未来，无限创造，乘风破浪，一往无前 ☀️

背景

最近的工作接触了很多前端校验相关的内容，其中涉及最多的开源 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	最小长度
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(''); // 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);      

结束语

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

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

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

凡事以理想为因，实行为果

愿诸君一路前行，从不孤独