Vue.js

Question

我正在使用 vuelidate，需要进行一些自定义验证，但这涉及到考虑不同的字段。例如：我在 Month 和 Year

之间有一个 select 的单选按钮

如果我 select Month 我会有 Year Start (2021, 2020,...) 和 Month Start (1, 2, 3... ) 下拉菜单和 Year End 和 Month End 下拉菜单。

如果我 select Year 我将有一个 Year Start（2021、2020，...）和 Year End（2021、2020，...）下拉菜单。

我的问题是我需要验证 month 选项 year start 大于 year end 或者它们可以相等并且 month start 必须大于month end.

并且对于 year 选项 Year start 应该大于 Year End

我有这个：

validations() {
  return {
    form: {
      startMonth: {},
      startYear: { required },
      endMonth: {},
      endYear: { required },
    }
  };
}

这是我想变成自定义验证器的逻辑

if (this.option === "Year") {
  if (this.startYear > this.endYear) {
    return true;
  } else {
    return false;
  }
}

else if (this.option === "Month") {
  if (this.startYear > this.endYear) {
    return true;
  } else if (this.startYear == this.endYear && parseInt(this.startMonth) > parseInt(this.endMonth)) {
    return true;
  } else {
    return false;
  }
}

任何见解，帮助将不胜感激。

更新可能的解决方案：

<script>
import { validationMixin } from 'vuelidate';
import { required } from 'vuelidate/lib/validators';
  data() {
    return {
      form: {
        month: null,
        year: null,
        compareMonth: null,
        compareYear: null
      },
    };
  },
  computed: {
    disableApply() {
      return this.$v.form.$invalid;
    },
  },

  methods: {
    validateYear() {
      if (this.$v.form.year.$model > this.$v.form.compareYear.$model) {
        return true;
      } else {
        return false;
      }
    },

    validateMonth() {
      if (this.validateYear()) {
        return true;
      } 

      if (this.$v.form.year.$model === this.$v.form.compareYear.$model && parseInt(this.$v.form.month.$model) > parseInt(this.$v.form.compareMonth.$model)) {
        return true;
      } else {
        return false;
      }
    }
  },

  validations() {
    return {
      form: {
        month: { required, validateMonth: this.validateMonth },
        year: { required, validateMonth: this.validateYear },
        compareMonth: { required, validateMonth: this.validateMonth },
        compareYear: { required, validateMonth: this.validateYear },
      }
    };
  }
};
</script>

Answer 1

根据accessing-component，您可以使用this关键字直接访问组件实例。
尝试将您的代码转换为 Vue 实例方法，如

function validateYear() {
  if (this.startYear > this.endYear) {
    return true;
  } else {
    return false;
  }
}

function validateMonth() {
  if (this.validateYear()) {
    return true;
  }
  if (this.startYear == this.endYear && parseInt(this.startMonth) > parseInt(this.endMonth)) {
    return true;
  } else {
    return false;
  }
}

然后将它们应用为自定义验证器：

validations() {
  return {
    form: {
      startMonth: {
        validateMonth: this.validateMonth
      },
      startYear: { 
        required,
        validateMonth: this.validateYear
      },
      endMonth: {
         validateMonth: this.validateMonth
      },
      endYear: { 
        required,
        validateMonth: this.validateYear
      },
    }
  };
}

P.S 这可能可以使用传入值、this.$v 值、三元表达式等进行更好的优化，我只是想给你一个前进的想法

Vue.js - Vuelidate 自定义验证器

Vue.js - Vuelidate custom validator

javascript

vuelidate