标签：picker form 校验 value callback 时间 Date new 选择器

这前端是真的难，就这一个校验搞了快大半天，查出来的结果还都不怎么好用。
最后是参考的http://www.manongjc.com/detail/16-hyixjugqukmcvjc.html
在自己这记录一下。

<el-form-item label="开始时间" prop="dateFrom">
          <el-date-picker
            clearable
            size="small"
            v-model="form.dateFrom"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间"
            @change="handelDateFrom"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="dateTo">
          <el-date-picker
            clearable
            size="small"
            v-model="form.dateTo"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间"
            @change="handelDateTo"
          ></el-date-picker>
        </el-form-item>

data () {
    return {
    	//这个例子在上午的时候用过了，并没有生效，是这里忘了加双向绑定。。。。
		dateFrom: null, 
      	dateTo: null,
		}
    }
    // 表单校验
      rules: {
        
        dateFrom: [
          { required: true, message: "开始时间不能为空", trigger: "change" },
          {
            validator: this.validationDateFrom
          }
        ],
        dateTo: [
          { required: true, message: "结束时间不能为空", trigger: "change" },
          {
            validator: this.validationDateTo
          }
        ]
      }

methods: {
    // 自定义验证规则(校验开始日期)
    validationDateFrom: function (rule, value, callback) {
      // 比较时间戳(进行运算的时候会自动转换成时间戳进行运算，不运算的时候，显示中国标准时间格式)
      if (
        new Date(this.form.dateTo) - new Date(value) <= 0 &&
        this.form.dateTo &&
        value
      ) {
        return callback(new Error('*开始时间不能大于结束时间'))
      }
      callback()
    },
    // 自定义验证规则(校验截止日期)
    validationDateTo: function (rule, value, callback) {
      // 比较时间戳(进行运算的时候会自动转换成时间戳进行运算，不运算的时候，显示中国标准时间格式)
      if (
        new Date(value) - new Date(this.form.dateFrom) <= 0 &&
        this.form.dateTo &&
        value
      ) {
        return callback(new Error('*结束时间不能小于开始时间'))
      } callback()
    },
    // 当开始时间变化时,需要重新校验
    handelDateFrom (value) {
      if (
        new Date(this.form.dateTo) - new Date(value) > 0 &&
        this.form.dateTo &&
        value
      ) {
        // 重新校验
        this.$refs.form.validate()
      }
    },
    handelDateTo (value) {
      if (
        new Date(value) - new Date(this.form.dateFrom) > 0 &&
        this.form.dateFrom &&
        value
      ) {
        this.$refs.form.validate()
      }
    }
}

标签：picker,form,校验,value,callback,时间,Date,new,选择器
来源： https://blog.csdn.net/Moonlet_/article/details/117704929

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。