怎么使用async-validator快速校验表单

async-validator的官方文档，真真"通俗易懂"。

为自己以后快速使用，这边写了个简单使用方法。

校验单个表单元素

先看demo：

<template lang="pug">
div
  input(v-model="title" @input="validateValue") 
  div(v-if="errorMessage") {{errorMessage}}
</template>
<script>
import Schema from "async-validator";
// 自定义规则函数的模板
const validateData = (rule, value, callback) => {
  let errorMessage;
  if (value === "坏蛋") {
    errorMessage = "请文明用语";
  }
  callback(errorMessage);
};
export default {
  data() {
    return {
      config: {
        modelKey: "title",
        label: "标题",
        rule: [
          { required: true, message: "标题不能为空" },
          { min: 3, message: "长度最小是3" },
          { max: 6, message: "长度最大是6" },
          validateData
        ]
      },
      title: "",
      errorMessage: ""
    };
  },
  methods: {
    // 封装 校验单个表单元素的值是否有效。参数：单个表单元素的配置、表单元素的value
    // 返回值是promise类型， {isValid:true,errorMessages:["xx","ddd"]}
    validateFormItem(config, value) {
      // 获取绑定的是什么属性
      const { modelKey, rule } = config;
      // 1. 通过描述信息创建一个骨架
      const schema = new Schema({ [modelKey]: rule });
      // 2. 将结果扔出去
      return new Promise(resolve => {
        schema.validate({ [modelKey]: value }, err => {
          // 没有错误，就说明是有效值
          if (!err) {
            resolve({ isValid: true });
            return;
          }
          // 错误的话，拿到所有的错误信息列表
          let errorMessages = err.map(item => item.message);
          resolve({ isValid: false, errorMessages });
        });
      });
    },
    // 使用校验
    async validateValue() {
      // 异步方法
      const { isValid, errorMessages } = await this.validateFormItem(
        this.config,
        this.title
      );
      if (isValid) {
        this.errorMessage = "";
        return;
      }
      // 有错误的话 显示所有错误信息
      this.errorMessage = errorMessages.join(" / ");
    }
  }
};
</script>

使用方法：

• 用描述信息创建Schema实例
• schema.validate是一个异步操作，这边用promise
• rule规则里，可以使用官方自带的一些校验规则，也可以写个自定义规则的函数

校验整个表单

还是先看demo：

<template lang="pug">
form
  div(v-for="(config,index) in configs" :key="index")
    label {{config.label}}
    input(v-model="formData[config.modelKey]" @input="validateValue(config)")
    span(v-if="config.errorMessage" style="color:'red'")  {{config.errorMessage}}
  button(@click.stop="submit") 点击提交
</template>
<script>
import Schema from "async-validator";
const validateData = ...
export default {
  data() {
    return {
      formData: {
        title: "",
        content: ""
      },
      configs: [
        {
          modelKey: "title",
          label: "标题",
          rule: [
            { required: true, message: "标题不能为空" },
            { min: 3, message: "长度最小是3" },
            { max: 6, message: "长度最大是6" },
            validateData
          ],
          errorMessage: ""
        },
        {
          modelKey: "content",
          label: "内容",
          rule: [{ required: true, message: "内容不能为空" }],
          errorMessage: ""
        }
      ]
    };
  },
  methods: {
    validateFormItem(config, value) {...}
    async validateValue(config) {
      // 异步方法
      const { isValid, errorMessages } = await this.validateFormItem(
        config,
        this.formData[config.modelKey]
      );
      if (isValid) {
        config.errorMessage = "";
        return;
      }
      // 有错误的话 显示所有错误信息
      config.errorMessage = errorMessages.join(" / ");
    },
    submit() {
      const isOk = this.configs.every(item => !item.errorMessage);
      alert(isOk ? "提交成功" : "不符合规范哟");
    }
  }
};
</script>

这里其实就是通过配置的形式，简单实现了表单的验证。