從新定義對象校驗 - Dvalidator

道，天然也。天然便是道。天然者，自，本身。然，如此，這樣，那樣。

前言

世間萬物，變幻莫測。現代社會發展迅速，」效率「這個話題一直圍繞着咱們。互聯網提高了傳統行業的運行效率，開發行業中各類框架/工具提高了程序員的開發效率。若是你是個前端，而且你會有開發表單的需求；若是你是個 node.js 後端，而且你須要作一些參數校驗的工做。那麼 Dvalidator 也許值得一試。

簡介

Dvalidator 是一個用於對象校驗的工具，能夠使用在任何 js 運行環境中。它推薦使用裝飾器語法來制定校驗規則，目前裝飾器提案處於 Stage2(Draft) 階段了，是一個初步標準，這意味着它有可能還會有一些變更。不過 Decorator 目前已經很是氾濫了，我認爲能夠無所顧慮的使用它。

你可能會有這樣的疑問 「爲何要寫 Dvalidator ，市面上不是有不少校驗工具麼？」。我幾年前使用過 angular.js 中自帶的校驗，也使用過 element-ui 中的校驗。是的，都作得很是好，這些做者也許比我水平高出幾個珠穆朗瑪峯。可是我認爲都不夠簡潔（功能太強），不獨立（集成特定框架），我想作一個純 js 的對象校驗，並且要很是簡單，很是易用。我可能考慮的應用場景還太少，可是我認爲仍是能覆蓋大部分場景的。Dvalidator 的使用者只須要制定規則，而後發起校驗，就完了。對！只有 2 個 Api。

也許我只是想造個很是簡單的輪子。

Dvalidator

Dvalidator 是一個純淨、可擴展、很是有用的校驗工具，它基於 Promise 和 Decorator 實現。

它有如下特性：

• Compatibility : 同時支持最新版 Decorator 用法和老版用法
• Asynchronous : 支持傳遞異步函數
• Ordered : 根據你定義的順序，有序校驗
• Small : 小巧，源碼不超過 200 行
• Easy : 使用簡單，僅僅只有 2 個 Api

起步

npm install dvalidator --save
複製代碼

npm install @babel/plugin-proposal-decorators --save-dev
複製代碼

配置 babel.config.js

plugins: [
  [
    '@babel/plugin-proposal-decorators',
    {
      // Dvalidator 支持最新的 Decorator 提案（legacy: false）
      // 一樣也支持舊版的 (legacy: true)，Decorator 能夠做用於字面量對象
      // 按照你的喜愛設置，推薦使用最新的提案
    }
  ]
];
複製代碼

使用

假設咱們有這樣一個需求，咱們將校驗一個 user 對象，暱稱和手機號是必選的，而且手機號須要發起一個服務端遠程校驗。

使用 Dvalidator，咱們能夠這樣寫：

// common.js
// 能夠把校驗規則作一下封裝，寫在單獨的文件裏，這樣業務代碼會很是簡潔。
import dvalidator from 'dvalidator';

const requiredRule = {
  validator: val => val != null && val !== '',
  message: 'required'
};
const required = dvalidator(requiredRule);
const checkPhone = dvalidator(value => fetch(`xxx/${value}`));

// user-signup.js
// 業務邏輯
class User {
  @required('nickname is required')
  nickname = '';
  @checkPhone('phone valid fail')
  @required
  phone = '';
}
const user = new User();

user
  .$validate()
  .then(/* success */)
  .catch(({ errors, fields }) => {
    /* fail */
    alert(errors[0].message);
    // errors 包含每一個屬性的錯誤信息，結構一致，嵌套對象會拍平
    // fields 以對象形式獲取錯誤信息，通常用於展現表單中每一欄的錯誤信息
  });
複製代碼

你也能夠實際操做一下 jsfiddle.net/zeusgo/oy1x…

Api

dvalidator(rule: string | Function | Rule): Dvalidator

一個類柯里化函數，你能夠無限次調用去豐富規則或者覆蓋規則。

你須要傳遞規則進來，規則能夠是一個函數（校驗方法），字符串（錯誤信息），或者對象（包含以上二者的集合）。

例如：

dvalidator({
  validator: val => {
    // 你的校驗部分代碼
    // 能夠返回 Boolean（同步校驗） 或者 Promise（異步校驗）
  },
  // 校驗出錯時會返回給你
  message: ''
});
複製代碼

一個校驗規則想要返回不一樣錯誤信息：

// 傳遞不一樣的 message
dvalidator(checkPhone)('msg1');
dvalidator(checkPhone)('msg2');
複製代碼

// 也能夠動態返回錯誤信息
dvalidator(() => {
  return Promise.reject(x ? 'msg1' : 'msg2');
});
複製代碼

$validate(filter?: Function): Promise<ValidateError | void>

把裝飾器加入到對象上後，對象就是屬於 「可校驗對象」，你能夠此方法進行數據校驗。filter 是一個用來過濾屬性的方法，咱們能夠用它作一些動態校驗。

// 返回 Promise
user
  .$validate(fieldKey => {
    // 這裏能夠定義你的過濾邏輯
    // 若是是嵌套的對象，那麼 fieldKey 會作拼接
    // 例如 user: { like: { game: 'lol' } }，只想校驗 like.game 的時候，你能夠這樣寫
    return /^like\.game/.test(fieldKey);
  })
  .catch(({ errors, fields }) => {
    // xxx
  });
複製代碼

接口聲明文件

從這裏能夠看到更詳細的結構信息！ index.d.ts

And More

Enjoy it!