antd-vue表单实现一个临时校验效果

需求场景：

有这样一个需求，ant-design-vue组件表单校验这里，我们使用input组件，使用maxlength限制用户输入，但没有使用showCount，也就是当时输入超限的时候，用户并不知道超出了限制，当然这也是因为我们的表单没有lable行并没有配合显示数字控制，所以就需要在达到字数控制的时候，我们依然能够提示这个字数限制的提示警告报错。

接下来看我如何实现

一、拦截rules自身携带的max校验，改为自定义校验

因为这里我们使低代码实现，rules都是在formitem上配置的，表单配置项配置componentProps，我们实现将这些配置想传递到真实的表单上。

author: {label: "论文作者",componentsProps: {maxlength: 64},placeholder: "输入施引论文作者, 多作者用,分隔",colSpan: 24,rules: [{ required: true, message: "请输入施引论文作者" },{ max: 64, message: "最多只能输入64个字符" }],type: "Input"},

这是一个作者的配置项：

以上是一个展示效果。

看到配置项中， componentsProps的配置项maxlength只允许64个字符，同时rules中我们配置了max为64的校验规则，如果这里我们不做处理，那当用户输入文字达到64个字符的时候，就无法再次输入，自然也就触发不了这个校验。

于是我们拦截这个校验，改为自定义校验。

<FormItem:rules="[...customRules(i.options[okey].rules)]"...其他属性
>
...其他代码
</ForItem>

我们将传递的参数的rules使用customRules再次处理一下，这里面我们拦截这个max校验，改为自定义校验。

if (item.max) {return {validator: async (rule, value) =>checkMax(rule, value, item.max, item.message, item.field)};} 

二、如何实现临时提示

拦截这个校验，我们处理的基本逻辑是，当用户输入长度达到限制条件的值时，我们需要提示。

那么这里面就需要两个操作，第一个是抛出错误，第二个就是要关闭错误。

我们知道在ant-design-vue中校验结果需要返回一个promise,但是我们要干两件事情，怎么处理呢。

我们利用promise.all实现。

if (value && value.length === max) {const validateError = new Promise((resove, reject) => {reject(message);});const validateSuccess = new Promise((resove, reject) => {setTimeout(() => {formRef.value && formRef.value.clearValidate([_rule.field.split(".")]);resove("success");}, 1000);});// return Promise.reject(message);return Promise.all([validateError, validateSuccess]);}return Promise.resolve();

以上就是我们巧妙的实现了，临时校验后，校验小时的方法。

注意这里个取消校验，是利用clearValidate这方法，通过数组指定当前绑定的表单项。

而这个表单项我们通过，rule是可以取到的，只需要变成数组即可。

这样，我这里就实现了这个需求效果。