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);      

結束語

到此本篇文章就結束了，很久沒有寫文章了，主要原因還是最近工作比較繁忙，十月一又躺平歇了一周現在整個人就比較懈。

但是想着很快也會再次相聚，各位讀者朋友們，再見喽，同時祝大家工作順利～

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

凡事以理想為因，實行為果

願諸君一路前行，從不孤獨