Question

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

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

Answer 1

您可以按如下方式使用名为custom validator的{{1}}：

price_greater

并将其添加到const price_greater = (value, vm) => (value >= vm.min_price);属性中：

validations

检查以下示例：

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
    }
  }
})

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.dirty {
  border-color: #5A5;
  background: #EFE;
}

.dirty:focus {
  outline-color: #8E8;
}

.error {
  border-color: red;
  background: #FDD;
}

如果您使用单个文件组件，请选中this solution

Vue JS vuelidate自定义验证

1 个答案: