Vue js vuelidate 自定义验证

Question

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

关于如何使用 vuelidate 实现此目的的任何线索

Answer 1

您可以使用名为 price_greater 的 custom validator，如下所示：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>



<div id="app">
  <input v-model="$v.user_price.$model" placeholder="user_price" type="number" :class="status($v.user_price)">

  <p class="error" v-show="respectMinPrice">user price must be greater or equal to min selling price</p>
</div>

如果您使用的是单个文件组件，请检查 this solution

Vue js vuelidate 自定义验证

Vue js vuelidate custom validation

javascript

vue.js

vuejs2

v-model

vuelidate