<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>

<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>

vue 使用 pug（详细说明） https://www.cnblogs.com/yhhBKY/p/11972157.html

手写实现 el-form 系列组件

https://juejin.cn/post/6898260687521644557?utm_source=gold_browser_extension