vue+elementui时间验证问题处理

问题描述

使用<el-date-picker>标签时，有时间校验规则，如果添加时间，没问题，但是编辑时，不重新选择的话，会报错

代码展示

<el-form v-model="result" :rules="rule">
<el-form-item label="时间" prop="update">
<el-date-picker v-model="result.update" type="date"></el-date-picker>
</el-form-item>
</el-form>
<script>
export default {
created(){
this.getData()
},
data(){
return{
result: {
update:'',
},
rules: {
update:[{type:'date',required:true,message:'请输入时间',trigger:'change'}]
},
}
},
methos: {
getData(){
//请求数据queryData返回后赋值，返回值格式2018-05-04
this.result.update=queryData   //第一种方式
this.result.update=new Date(queryData)  //第二种方式
},
}
}
</script>

报错现象

如果是第一种方式，那么会直接报错：vaule.getTime is not a function

如果是第二种方式，那么编辑时，如果不修改时间直接保存，那么后台存入的数据不是日期而是日期时间格式，即本应该2018-05-04,但存入的是2018-05-04 08:00:00

问题原因

第一种方式，因为在created()方法里执行的时候，有可能返回undefined等类型，但是校验规则里会校验，此时会报错

第二种方式，因为new Date()方式会把2018-05-04这种以-连接并有0的ISO时间格式用格林尼治国际标准时的时区计时（js时间Date对象介绍及解决getTime转换为8点的问题）返回，后台未经处理然后直接返回所以格式错误

解决方式

修改rules内容为：

update:[{required:true,message:'请输入时间'}]

如果rules内容不修改，则必须保证后台返回数据赋值的时候是'2018-05-04'或者空字符串''

使用第一种方式，不进行处理返回的日期格式字符串