我在我的项目中使用VeeValidate 插件进行验证。
这是我要验证的表单。
如果我想验证保存按钮上的所有字段
this.$validator.validateAll().then(result => {
if (result) {
}
// alert("Correct them errors!");
}
这种功能会有所帮助。
但是如果我想通过添加按钮验证大学和课程。 除了 validate all 有没有办法只传递这两个字段名称（uni 和 cou）进行验证？
【问题讨论】：
标签： validation vue.js vuejs2 vee-validate
您可以使用vee-validate 的data-vv-scope 来实现此功能。这是怎么做的
<input
id="university"
name="university" type="text"
v-model="<model_of_university>"
data-vv-rules="required"
data-vv-as="University"
data-vv-scope="university" required/>
<input
id="course"
name="course" type="text"
v-model="<model_of_course>"
data-vv-rules="required"
data-vv-as="Course"
data-vv-scope="university" required/>
现在，为了验证这些字段，只需在 validateAll 方法中传递 data-vv-scope 值，如下所示
this.$validator.validateAll('university').then((result) => {
if (result) {
}
// alert("Correct them errors!");
}
【讨论】：
您可以通过添加 data-vv-scope 来告诉验证器确定字段的范围。然后将使用它们的名称和范围来识别这些字段。您可以在不同的范围内拥有相同名称的输入，并且您可以独立地显示、清除和验证这些范围。
为方便起见，您可以在拥有输入的表单上添加 data-vv-scope 属性，您不必在每个输入上添加该属性。您还可以将范围属性传递给验证器表达式。
<v-form data-vv-scope="form1" >
<v-text-field v-validate="'required|alpha_spaces'" type="text" name="username" data-vv-scope="form1"/>
<span>{{ errors.first('form1.username') }}</span>
</v-form>
<v-form data-vv-scope="form2" >
<v-text-field v-validate="'required|alpha_spaces'" type="text" name="username" data-vv-scope="form1"/>
<span>{{ errors.first('form2.username') }}</span>
</v-form>
//点击事件，会验证form1
submit() {
this.$validator.validateAll('form1').then(valid => {
if (valid) {
}
});
}
请参考以下链接：https://baianat.github.io/vee-validate/examples/scopes.html
【讨论】：
试试看，在你的代码中写上这个：
this.$validator.validateAll('nameForm.*').then((result) => {
enter code hereif (result) {
// pass
}
// alert("Correct them errors!");
}
这将验证所有表单
【讨论】：
要仅验证两个字段，您可以在这些输入中使用属性 data-vv-scope="university"，然后：
this.$validator.validate("university").then((isValid) => {
如果（有效）{
...
}
})
如果要同时验证所有作用域的所有字段：
this.$validator.validateScopes().then((isValid) => {
如果（有效）{
...
}
})
【讨论】：