validation - Vue.js Vee Validate 如何在元素范围内进行验证

Question

我在我的项目中使用VeeValidate 插件进行验证。

这是我要验证的表格。

如果我想验证保存按钮上的所有字段

this.$validator.validateAll().then(result => {
    if (result) {

    }
    // alert("Correct them errors!");
}

这种功能会有所帮助。

但是，如果我想在添加按钮上验证大学和课程怎么办。 除了 validate all 有没有办法只传递这两个字段名称（uni 和 cou）进行验证？

Answer 1

您可以使用data-vv-scope来vee-validate实现此功能。这是如何完成的

<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/>

现在，为了验证这些字段，只需data-vv-scope在方法中传递值，validateAll如下所示

this.$validator.validateAll('university').then((result) => {
 if (result) {

    }
    // alert("Correct them errors!");
}

Answer 2

您可以通过添加 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

Answer 3

试试看，在你的代码中放这个：

this.$validator.validateAll('nameForm.*').then((result) => {
  enter code hereif (result) {
  // pass
}
// alert("Correct them errors!");

}

这将验证所有表格

Answer 4

要仅验证两个字段，您可以在这些输入中使用属性 data-vv-scope="university"，然后：

this.$validator.validate("university").then((isValid) => {
      如果（有效）{
        ...             
      }
})

如果要同时验证所有范围的所有字段：

this.$validator.validateScopes().then((isValid) => {
      如果（有效）{
        ...             
      }
})