怎麼使用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>
複製代碼

這裏其實就是通過配置的形式，簡單實現了表單的驗證。