Vue学习-DatePicker表单验证问题

问题描述：

form表单提交时，日期值已经选择了，但还是提示未选择。

<Col span="6">
   <FormItem label="周期起" prop="cycleStart" style="width:100px">
      <DatePicker v-model="form.cycleStart" style="width:100px" type="year" ></DatePicker>
   </FormItem>
</Col>
<Col span="6">
   <FormItem label="周期止" prop="cycleEnd" style="width:100px">
      <DatePicker v-model="form.cycleEnd" style="width:100px" type="year" ></DatePicker>
   </FormItem>
</Col>


cycleStart: [{required: true, message: "请选择起始周期", trigger: "blur" }],
cycleEnd: [{required: true,message: "请选择截止周期",trigger: "blur"}],

解决方案：

两种解决方法

cycleStart: [{pattern: /.+/,required: true, message: "请选择起始周期", trigger: "blur" }],
cycleEnd: [{pattern: /.+/,required: true,message: "请选择截止周期",trigger: "blur"}],

cycleStart: [{type: 'date',required: true, message: "请选择起始周期", trigger: "blur" }],
cycleEnd: [{type: 'date',required: true,message: "请选择截止周期",trigger: "blur"}],

不建议使用type: ‘date’。

原因是因为使用【type: ‘date’】。表单二次提交时提交不了。DatePicker控件一直处于刷新状态。具体为什么会处于刷新状态，有读者知道的可以评论补充一下。因为笔者不知道。