ant-design-vueForm表单自定义校验规则
一、自定义校验规则
本处以校验手机号为例。
一、页面代码:
<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();
}
},