ant-design-vue表单自定义校验规则以及提交前验证，防止校验未通过发送请求/含a-form-modal-item嵌套校验（详细）

一、自定义校验规则

本处以校验手机号为例。

一、页面代码：

<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapperCol= "{ span: 4 }">
            <a-form-model-item label="姓名：" prop="add_phone">
                <a-input v-model="form.add_phone" placeholder="请输入电话号码" />
            </a-form-model-item>
        </a-form-model>

---

1、a-form-model组件身上的属性：
ref：将当前表单挂载到vue实例身上，方便调用该组件的方法，例如我一会要说的validate，以及resetFields方法等，可以使用是因为ant在提供该组件时，在该组件的内部封装了这些方法。
model：在data模型数据中绑定的表单数据对象。
rules：当前表单的校验规则。

---

2、a-form-model-item组件身上的属性：
**prop：**指向rules表单校验规则的校验属性，想要校验当前字段，必须指定该属性。

---

二、表单绑定数据以及校验规则

// 表单绑定数据
form:{
    add_phone:''
},           
// 表单校验规则
rules: {
    add_phone:[{required: true,message:'电话号码不能为空'},{validator:this.validatorPhone}]
},

---

validator：指向该字段的校验规则，validatorPhone是在methods中提供的一个函数。

---

该函数如下：

validatorPhone(rule, value, callback) {
            const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
            if (!phoneReg.test(value)) {
                callback('请输入正确格式的手机号码')
                return;//校验不通过结束当前校验
            }
                callback();//必须调用，参数为空视为校验通过     
        },

二、提交前验证，防止校验未通过发送请求

async onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                // 校验未全部通过，结束当前提交
                if (!valid) return false;
                // 校验全部通过，提交，此处提交代码仅作演示
                const {data:res} = await this.axios.post('你的提交地址',{提交参数})
            });
        },

---

由于在表单中有ref属性，可以通过当前的vue实例获取到该表单组件，并且调用该表单组件上的validate方法。

---

valid：该回调参数为Boolean值，只有该表单上的所有校验均通过时为true，为true时才进行请求的发送。

三、a-form-modal-item嵌套校验

首先解释一下什么是嵌套校验，就是一个a-form-modal-item中含两个校验项，但是每个a-form-modal-item只会默认校验第一项，所以就需要在一个a-form-modal-item中嵌套两个a-form-modal-item。
官网说明：

想要的实际效果：

页面代码：

 <a-form-model-item label="实际时间" style="margin-bottom:0;" required>
    <a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="fill_actual_start">
        <a-date-picker v-model="fillInForm.fill_actual_start" style="width: 100%" />
    </a-form-model-item>
    <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">-</span>
    <a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="fill_actual_end">
        <a-date-picker v-model="fillInForm.fill_actual_end" style="width: 100%" />
    </a-form-model-item>
</a-form-model-item>

data中数据校验规则：

 	fill_actual_start:[{required:true,message:'实际开始时间不能为空',trigger:'change'}],
	fill_actual_end:[{type:'object',validator:this.fillValidate}],

methods中校验方法：

// 填报实际结束时间校验
        fillValidate(rule,value,callback){
            if(value && this.fillInForm.fill_actual_start){
                let startTime = this.$moment(this.fillInForm.fill_actual_start).format('YYYY-MM-DD');
                let endTime = this.$moment(value).format('YYYY-MM-DD');
                if(startTime > endTime){
                callback(new Error('开始时间不能大于结束时间'));//校验不通过结束当前校验
                return false;
            }
            }else{
                callback();
            }
        },