用async-validator给Vue写个数据校验器

在Vue项目中封装async-validator^[1]做为数据验证器，从此告别百度找正则

1. 安装async-validator

npm i async-validator

2.封装为vue插件

// src/utils/validate.js 目录路径
import Vue from 'vue'

const AsyncValidator = require('async-validator');

const validator = (descriptor, data) => {

  const validatorInstance = new AsyncValidator.default(descriptor);
  let result;

  validatorInstance.validate(data, { firstFields: true }, (errors, fields) => {
    //@errors  type:Array  eg:[ { message: '手机号格式不正确', field: 'phone' } ]
    if (errors) {
      result = errors[0].message;
    } else {
      result = true;
    }
  })

  return result;
};

let validatePlugin = {};

validatePlugin.install = function (Vue, options) {
  Vue.prototype.$validator = async function (rule, data) {
    let result = validator(rule, data);
    return result;
  }
}

Vue.use(validatePlugin)

3.在main.js中引入

import './utils/validate'

3.在项目中使用

//定义校验规则
const rules = {
  account: [
    {
      required: true,
      message: "请输入帐号"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码"
    }
  ]
};

//使用示例
 async doLogin() {
      const data = { account: this.account, password: this.password };
      const validate = await this.$validator(rules, data);
      
      if (validate !== true) {
        //弹出错误提示 - 根据需求做业务处理
        return;
      }
      //- 执行后续步骤
}

以上，即可在项目中利用async-validator做数据校验了，省时省力，不用自己到处找正则了，也可以把规则抽象出来单独写在一个文件里，方便维护！

参考资料