antd-vue 2.x 表单验证的坑，你遇到过么

好多年没有写博客了，突然写一篇。

最近学习AntdVue2.x+Vue3.x ，据说antdv 特别优秀，更新也及时还适配了vue3，所以，选择了antdv，而不是elementui，虽然elementui也有新版本了，但是总觉得那不是同一套体系了

在学习到Form表单验证的时候，发现一个问题，来这里吐个槽，看看大家有没有遇到这样的问题。

问题的起因是，Antdv表单项间距特别高，我想他这是为了可以放错误提示信息，不仅官方文档这样写，提供的pro框架也是这样的，参考了很多的第三方框架也是遵循官方的提示样式，可能大家都觉得这样挺好的，表单项下放置错误提示信息。

凡事总有个但是，但是我觉得这样不好，间距太高了，提示信息太占位置了，页面比较紧凑时，更是让人难以接受，于是，我想改一下这个显示方式，使用 鼠标悬停气泡显示错误提示信息。

表单项验证错误时，显示红框，并在后面显示红色的X，再辅助鼠标悬停气泡提示，这样就能够适应绝大多数场景。

毕竟是学习框架，看着文档发现了这个form事件validate，在每个表单项被验证后会触发事件，我就真的写了，但是他竟然不生效

我本地不生效，然后还特地写了最小验证环境  CodeSandBox  ，提交到了官方github

不过，总不能这个事件不生效，就放弃了，如果这是项目要求，总得想办法实现的。经过一天的奋战，总算解决了。

解决思路如下：

1、借用验证规则中的自定义验证，所有的规则，不管是用户自定义的验证规则，还是使用已定义的，我都再进行一层包装，包装内，自己调用验证

2、css调整表单项间距

3、悬浮气泡提示信息，借用第三方提供的（tippy.js），由于antdv并没有提供方法调用方式的tooltip

最终实现效果如下：

 核心代码如下：

<template>
  <a-form
    name="custom-validation"
    class="lan-form"
    ref="formRef"
    :labelCol="{ span: 24 }"
    :model="user"
    :rules="rules"
    :layout="formlayout"
    @submit="mySubmit"
    @validate="myValidateForm"
    @validateField="myValidateFormFields"
    @finish="myFinish"
    @finishFailed="myFinishFailed"
  >
    <a-form-item
      has-feedback
      label="姓名"
      name="name"
      :labelCol="{ span: 2 }"
      :validateFirst="true"
      class="name"
    >
      <a-input v-model:value="user.name" type="text" autocomplete="off" />
    </a-form-item>
    <a-form-item
      has-feedback
      label="年龄"
      name="age"
      :labelCol="{ span: 2 }"
      :validateFirst="true"
    >
      <!-- <a-input-number v-model:value="user.age" class="nohandler"></a-input-number> -->
      <a-input v-model:value.number="user.age"></a-input>
    </a-form-item>
    <a-form-item
      has-feedback
      label="定量"
      name="num"
      :labelCol="{ span: 2 }"
      :validateFirst="true"
    >
      <!-- <a-input-number v-model:value="user.age" class="nohandler"></a-input-number> -->
      <a-input v-model:value.number="user.num"></a-input>
    </a-form-item>
    <a-form-item
      has-feedback
      label="远程"
      name="remote"
      :labelCol="{ span: 2 }"
      :validateFirst="true"
    >
      <a-input v-model:value.number="user.remote"></a-input>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" @click="submitForm"
        >提交</a-button
      >
      <a-button type="default" @click="resetForm">重置</a-button>

      <a-button type="default" @click="loadRules">重置</a-button>
      <a-button type="default" @click="validate2">重置</a-button>
      <a-button type="default" @click="validate3">设置验证</a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import Schema from "async-validator";
import tippy from "tippy.js";
export default {
  name: "App",
  data: function () {
    return {
      user: {
        name: "",
        age: 0,
        num: "",
        remote: "",
      },
      rules: {
        name: [
          {
            required: true,
            min: 3,
            max: 5,
            message: "请输入3——5个字符",
          },
        ],
        age: [
          {
            type: "number",
            min: 3,
            max: 5,
            message: "只能输入大于3小于5的数字",
          },
        ],
        num: [
          {
            required: true,
            type: "enum",
            enum: [5, 6],
            message: "输入数字5或者6",
          },
          {
            validator: function (rule, value, callback) {
              debugger;
              if (value == 5) {
                return callback();
              }
              return callback("请输入数字5（同步验证）");
            },
          },
        ],
        remote: [
          {
            type: "number",
            //异步验证
            min: 3,
            max: 9,
            message: "只能输入大于3小于9的数字",
          },
          {
            type: "number",
            asyncValidator: function (rule, value, callback) {
              setTimeout(function () {
                if (value == 5) {
                  return callback();
                }
                return callback("只能输入数字5（异步验证）");
              }, 1000);
            },
          },
        ],
      },
    };
  },
  methods: {
    validateField: function (
      model,
      rules,
      isFirst,
      successCallback,
      failCallback,
      preCallback
    ) {
      let validator = new Schema(rules);
      let option = isFirst ? { firstFields: true } : {};
      return validator
        .validate(model, option)
        .then(() => {
          // 校验通过
          successCallback(model);
          preCallback();
        })
        .catch(({ fields, errors }) => {
          failCallback(model, errors);
          preCallback(errors);
        });
    },
    validateSucessCallback: function (argmodel) {
      try {
        for (let field in argmodel) {
          let formElement = document.getElementById(
            "custom-validation_" + field
          );
          let formitemWrapper =
            formElement.parentElement.parentElement.parentElement;
          let lanTippy2 = formitemWrapper.lanTippy;
          if (lanTippy2) {
            lanTippy2.hide();
            lanTippy2.disable();
          }
        }
      } catch (e) {
        console.error(e);
      }
    },
    validateFailCallback: function (model, errors) {
      let errorMessages = "";
      for (let { field, message } of errors) {
        errorMessages += message + "<br/>";
      }
      let formElement = document.getElementById(
        "custom-validation_" + Object.keys(model)[0]
      );
      let formitemWrapper =
        formElement.parentElement.parentElement.parentElement;
      let lanTippy2 = formitemWrapper.lanTippy;
      if (lanTippy2) {
        lanTippy2.setContent(errorMessages);
        lanTippy2.enable();
        lanTippy2.show();
      } else {
        let lanTippy = tippy(formitemWrapper, {
          content: errorMessages,
          allowHTML: true,
        });
        lanTippy.show();
        formitemWrapper.lanTippy = lanTippy;
      }
    },
    setFormFieldValidate: function (formRef, fields) {
      let self = this;
      let formModel = formRef.model;
      let formRules = formRef.rules;
      if (!formModel) {
        throw "表单未设置model";
      }
      if (!formRules) {
        throw "表单未设置rules";
      }
      if (formRef.$el.className.indexOf("lan-form") == -1) {
        formRef.$el.className = formRef.$el.className + " lan-form";
      }

      let model = {};
      if (fields && fields instanceof Array) {
        for (let i = 0; i < fields.length; i++) {
          let f = fields[i];
          model[f] = formModel[f];
        }
      } else if (fields && fields instanceof String) {
        model[fields] = formModel[fields];
      } else {
        model = formModel;
      }
      for (let key in model) {
        let ruleItemArr = formRules[key];
        if (!ruleItemArr) {
          continue;
        }
        let miniRuleArr = [];
        for (let i = 0; i < ruleItemArr.length; i++) {
          let orginalRuleInfo = ruleItemArr[i];
          let ruleInfo = JSON.parse(JSON.stringify(orginalRuleInfo));

          let miniValidateField = function (rule, value, callback) {
            // if(rule&&(rule.field=='validator'||rule.field=='asyncValidator')){debugger;
            //     return;
            // }
            let ruleObj = {};
            ruleObj[this.key] = this.rule;
            let modelObj = {};
            modelObj[this.key] = value;
            self.validateField(
              modelObj,
              ruleObj,
              false,
              self.validateSucessCallback,
              self.validateFailCallback,
              callback
            );
          };
          if (orginalRuleInfo.validator) {
            ruleInfo.validator = orginalRuleInfo.validator;
            orginalRuleInfo.validator = miniValidateField.bind({
              key: key,
              rule: ruleInfo,
            });
          } else if (orginalRuleInfo.asyncValidator) {
            ruleInfo.asyncValidator = orginalRuleInfo.asyncValidator;
            orginalRuleInfo.asyncValidator = miniValidateField.bind({
              key: key,
              rule: ruleInfo,
            });
          } else {
            orginalRuleInfo.validator = miniValidateField.bind({
              key: key,
              rule: ruleInfo,
            });
          }
        }
      }
    },
  },

  mounted: function () {
    this.setFormFieldValidate(this.$refs.formRef);
  },
};
</script>

<style lang="less">
.lan-form {
  .ant-form-item-control {
    border-radius: 5px;
    .ant-input,
    .ant-input-number {
      border-radius: 5px;
    }
  }
  .ant-form-item {
    margin-bottom: 5px;
  }
  .ant-form-explain {
    display: none;
  }
  .ant-input-number {
     100%;
    .ant-input-number-handler-wrap {
      display: none;
    }
  }
}
</style>

最小环境校验

官方文档Form有这么一个事件，validate,任一表单项被校验后触发