vue+elementui时间验证问题处理

2019独角兽企业重金招聘Python工程师标准>>>

问题描述

• 使用<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'或者空字符串''
• 使用第一种方式，不进行处理返回的日期格式字符串

转载于:https://my.oschina.net/yxmBetter/blog/1806992