我的要求是这样的。
这是我的代码。
<template>
<div>
<h1>Add Items</h1>
Product Name :
<input
type="text"
name="product"
v-model="product"
v-validate="'required|alpha_dash'"
>
<span style="color:red;">{{errors.first('product')}}</span>
<br>
Product Price :
<input
type="number"
name="price"
v-model="price"
v-validate="'required|min_value:100|max_value:500'"
>
<span style="color:red;">{{errors.first('product')}}</span>
<br>
<button @click="submit">Save</button>
</div>
</template>
<script>
export default {
data() {
return {
price: "",
product: ""
};
},
methods: {
submit() {
alert("On submit");
}
}
};
</script>
现在它只显示第一个错误
{{errors.first('product')}}
而不是这个我想一次显示所有错误和
这仅在您触摸输入字段时显示错误。无论您是否触摸这些字段,我都想显示所有验证错误,当您单击“提交”按钮时,我想显示所有错误。
最佳答案
您可以使用validateAll
方法:
submit() {
this.$validator.validateAll()
if (!this.errors.any()) {
alert('submit')
}
}
fiddle here