我正在创建基本的库存管理系统。在那里,我要验证的发票,用户输入的价格必须大于或等于最低售价。我使用vuelidate包进行验证。
任何线索如何使用 vuelidate 来实现这一点
您可以使用如下custom validator
调用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;
}
<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>
如果您正在使用单个文件组件,请检查此解决方案