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) => {
     
  let result;
  const validatorInstance = new AsyncValidator.default(descriptor);
  
  validatorInstance.validate(data, { firstFields: true }, (errors, fields) => {
     
    //@errors  type:Array  eg:[ { message: '手机号格式不正确', field: 'phone' } ]  
    result = errors ? errors[0].message : 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做数据校验了，省时省力，不用自己到处找正则了，也可以把规则抽象出来单独写在一个文件里，方便维护！

参考资料

[1]

async-validator: 'https://github.com/yiminghe/async-validator'