引言

本文章涉及的代码块，为实际代码中的截取部分，请各位结合自己的实际情况修改

开始

这里我的校验需求是编号不可重复，如果重复需要抛出校验信息

表单结构部分

根据Ant Design VUE的文档定义好需要的字段

<a-modal :visible="visible" title="项目定义信息" :width="800">
        <a-form-model ref="project" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }" :model="project">
            <a-row>
                <a-col :md="12" :sm="24">
                    <a-form-model-item prop="projectCode" label="项目编号" :labelCol="{span: 6}" :wrapperCol="{span: 16, offset: 1}">
                        <a-input v-model="project.projectCode" placeholder="请输入"/>
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>
    </a-modal>

校验参数定义部分

通过参考Ant Design VUE的文档，自定义表单校验规则的关键字为validator，如下图所示：

参照文档后，编写出如下代码。在这里我定义的函数名为handleConfirmProjectCode，自定义函数校验触发的状态为失去焦点时出触发

        data() {
            return {
                visible: false,
                rules: {
                    projectCode: [{validator:this.handleConfirmProjectCode, trigger: 'blur'}]
                },
                project: {},
            }
        },

monthed部分（函数部分）

直接上代码

            handleConfirmProjectCode(rule,value,callback){
                this.$http.get(`这里面写你需要请求后台的地址`)
                    .then(response=>{
                        if (response.data.success==true){
                            callback(response.data.message)//将需要系统显示的校验提示语写到回调里就可以
                        }
                        callback()//这个回调必须调用一次，我也不知道为什么，文档也没有说明
                    })
                    .catch(error=>{// eslint-disable-line no-unused-vars
                        this.$message.warning('校验异常')
                    })
            }

解释一下上面的代码：

• value这个入参就是你挂载这个校验的表单中元素的值，比如你input框中输入的值，下拉选择的值
• callback校验回调
• // eslint-disable-line no-unused-vars这个跟本文其实没什么关系，是因为我的项目开了eslint校验，我在catch异常处理时定义的error没有使用，运行时会报错，所以加上这个注解让他忽略这个定义未使用的变量