1.需求描述:
有一个Form表单需要进行校验,其中一个变量会根据前置条件的不同而进行组件的变化,然后在新增或者编辑保存的时候,需要对它们进行非空校验。
2.问题描述:
1.由于这个变量根据条件绑定了两个组件,一个是InputNumber(数字整型),一个是DatePicker(日期Date),所以导致它们在校验的时候会出现问题。
2.若给inputNumber设定type="number",给DataPicker设定type=“date”的话。当类型不匹配的时候DataPicker会进入转圈状态,导致无法保存。
ps:form表单校验的时候会同时校验formItem的值以及数据类型,默认为string类型的,若类型不匹配的话也会进行非空提示。
3.实现思路:
思路1:当一个变量根据条件绑定了多个组件并需要进行非空判定或者校验等,通过form表单中的自定义校验去进行处理。
思路2:或者给formItem设置type="date"(使用此方式进行处理的话,编辑的时候数据类型一定要用 new Date() 转换成时间格式才行)
4.最终代码:
// 思路1:自定义校验
export default {
data () {
return {
formValidate: {
name: '',
mail: '',
city: '',
gender: '',
interest: [],
date: '',
time: '',
desc: ''
},
ruleValidate: {
name: [
{ required: true,validator:this.validateTime,message: 'The name cannot be empty', trigger: 'blur' }
],
}
}
},
methods:{
// 自定义校验
validateTime(rule,value,callback){
if(value === "") {
return callback(new Error("时间不能为空"));
} else {
callback();
}
}
}
}
// 思路2:formItem设置type类型
date: [
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' }],
time: [{ required: true, type: 'string', message: 'Please select time', trigger: 'change' }],