发布于

前后端分离框架表单时间验证问题

1.表单提交信息

<i-col span="10">
 <i-form-item label="开始时间: " prop="startDate" required>
 <i-date-picker style="width: 100%" :clearable="false"
 v-model="formItem.startDate" type="date"
 format="yyyy-MM-dd"
 placeholder="选择活动时间"></i-date-picker>
 </i-form-item>
</i-col>

2.导入验证日期格式

import {validateDate} from '../../../../utils/validators'

3.验证信息

VO中对应字段可以是“”或null

ruleValidate: {
 'startDate': [
 {required: true, message: '请选择开始时间', validator: validateDate, trigger: 'change'},
 ],
 'endDate': [
 {required: true, message: '请选择接结束时间', validator: validateDate, trigger: 'change'},
 ],
},

4.其他情况说明

若VO中存在多层封装，类似于中宁水务系统中的教育培训，则无需上面2、3步骤，
<i-col span="20">
  <i-form-item label="培训时间: " prop="education.eduTime" required>
    <i-date-picker style="width: 100%" :clearable="false"
                   v-model="formItem.education.eduTime" type="date"
                   placeholder="选择活动时间"></i-date-picker>
  </i-form-item>
</i-col>
ruleValidate: {
 'education.eduTime': [
 {required: true, message: '请选择培训时间', type: 'date', triggers: ['blur', 'change']}
 ],
},