element 表单自定义校验

最新推荐文章于 2025-05-31 23:07:05 发布

原创最新推荐文章于 2025-05-31 23:07:05 发布 · 732 阅读

0 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

element

3 篇文章

订阅专栏

本文介绍如何在Element UI表单中实现开始时间、结束时间和时间间隔的自定义校验规则，包括验证逻辑和watch监听器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element 表单自定义校验备份

涉及开始时间，结束时间，时间间隔

rules

      rules: {
        startDate: [
          { required: true, message: '请输选择开始时间', trigger: 'change' },
          { validator: startDateRules, trigger: 'change' },
        ],
        endDate: [
          { required: true, message: '请输选择结束时间', trigger: 'change' },
          { validator: endDateRules, trigger: 'change' },
        ],
        maintainInterval: [
          { required: true, message: '请输选择间隔周期', trigger: 'change' },
          { validator: maintainIntervalRules, trigger: 'change' },
        ],
        maintainGrade: [{ required: true, message: '请选择级别', trigger: 'change' }],
      },

对应的规则说明
在data(){}中return上面声明对应的规则

 const endDateRules = (rule, value, callback) => {
      // this.endTime = Date.parse(value);
      let end = Date.parse(value);
      let start = this.startTime;
      let type = this.intervalType;
      let interval = 0;
      if (start && end) {
        if (!type) {
          return callback(new Error('请输选择间隔周期'));
        } else if (type == 'day') {
          interval = 24 * 60 * 60 * 1000;
          if (start + interval > end) {
            return callback(new Error('结束时间应大于或等于开始时间+间隔周期'));
          } else {
            callback();
          }
          callback();
        } else if (type == 'week') {
          interval = 7 * 24 * 60 * 60 * 1000;
          if (start + interval > end) {
            return callback(new Error('结束时间应大于或等于开始时间+间隔周期'));
          } else {
            callback();
          }
        } else if (type == 'month') {
          interval = 30 * 24 * 60 * 60 * 1000;
          if (start + interval > end) {
            return callback(new Error('结束时间应大于或等于开始时间+间隔周期'));
          } else {
            callback();
          }
        } else if (type == 'quarter') {
          interval = 90 * 24 * 60 * 60 * 1000;
          if (start + interval > end) {
            return callback(new Error('结束时间应大于或等于开始时间+间隔周期'));
          } else {
            callback();
          }
        } else if (type == 'half') {
          interval = 180 * 24 * 60 * 60 * 1000;
          if (start + interval > end) {
            return callback(new Error('结束时间应大于或等于开始时间+间隔周期'));
          } else {
            callback();
          }
        } else if (type == 'year') {
          interval = 365 * 24 * 60 * 60 * 1000;
          if (start + interval > end) {
            return callback(new Error('结束时间应大于或等于开始时间+间隔周期'));
          } else {
            callback();
          }
        }
      } else {
        callback();
      }
    };
    const startDateRules = (rule, value, callback) => {
      this.startTime = Date.parse(value);
      return callback();
    };
    const maintainIntervalRules = (rule, value, callback) => {
      this.intervalType = value;
      return callback();
    };

监听
如果间隔周期改变，执行结束时间的表单校验

  watch: {
    'formData.maintainInterval': {
      handler: function (val, oval) {
        if (val) {
          this.intervalType = val;
          this.$refs.planForm.validateField('endDate');
        }
      },
      deep: true,
      // immediate: true
    },
  },