Vue JS vuelidate自定义验证

Question

我正在创建基本的库存管理系统。在此，我要验证的发票中，用户输入的价格必须大于或等于最低销售价格。我使用vuelidate软件包进行验证。

任何线索如何使用vuelidate实现这一目标

Answer 1

您可以使用一种custom validator称为price_greater，如下所示：

   const price_greater = (value, vm) => (value >= vm.min_price);

并将其添加到validations属性：

validations: {
    user_price: {
         required,
         price_greater
       }
}

检查以下示例：

   const price_greater = (value, vm) => (value >= vm.min_price);

validations: {
    user_price: {
         required,
         price_greater
       }
}

Vue.use(window.vuelidate.default)
const {
  required
} = window.validators;
const price_greater =
  (value, vm) => (value >= vm.min_price);
new Vue({
  el: "#app",
  data() {
    return {
      min_price: 455,
      user_price: 0,
      respectMinPrice: false
    }
  },
  methods: {
    status(validation) {
      return {
        error: validation.$error,
        dirty: validation.$dirty
      }
    }
  },

  validations: {

    user_price: {
      required,
      price_greater
    }
  }
})

如果您使用单个文件组件，请检查此解决方案