关于iview表单校验 date校验 多选日期校验问题

遇到的问题

		在使用iview框架时,在后端管理系统中,通常会使用到form表单组件,当然日期也通常出现在搜索
	框表单中,但是有时候会出现日期组件校验错误的情况

问题分析

	首先,iview采用的是async-validator的校验规则,根据规则校验类型type值一般分为以下几种:
	string、method、number、boolean、array、object、date、integer、float、regexp、email、url、
	hex;
	其次,大家都知道日期组件一般肯定想到的是 type="date"  ,先看下日期组件值的value类型,可以
	自己打印看下;
			第一种情况: 单选日期(只有一个日期), value值为:“2019-06-10”;
			第二种情况: 多选日期(只有一个日期), value值为:["2019-06-10","2019-06-12"],未选中
			值时默认的结构为[" "," " ];
			由此可以看出,如果仅仅用一个 type: "array",来校验多选日期肯定是无效的,因为默认虽然是
			空,但是值的结构是一个数组,怎么校验都是真。所以我们需要对每个子元素进行校验;				

解决问题

	通过分析,我们发现,表单校验时,我们需要选择和日期的值相匹配的类型,
	当日期单选时我们可以选择:type:"date",
	当日期多选时,我们需要对每一个子元素添加校验(fields)代码如下:
{ required: true, type: 'array',
	        fields:{
	            0:{required: true, type:'date',message: '有效期不能为空', trigger: 'change'},
	            1:{required: true, type:'date',message: '有效期不能为空', trigger: 'change'}
	        },
	        trigger: 'change'},
	 以上仅仅是个人见解,如有疑问或者更好的解决办法,欢迎交流^_^

猜你喜欢

转载自blog.csdn.net/Taurus_0811/article/details/91363449