从新定义对象校验 - 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!