Vue.js Vee Проверить, как выполнить проверку в области элементов

Question

Я использую плагин VeeValidate для проверки в моем проекте.

Это моя форма, которую я собираюсь проверить.

Если я хочу подтвердить все поля кнопкой сохранения

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

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

Такая функция поможет.

Но что, если Я хочу подтвердить университет и курс по кнопке добавления. Вместо проверки всего, есть ли способ передать только два имени поля (uni и cou) для проверки?

Answer 1

Вы можете сказать валидатору, что он должен заполнить поля, добавив data-vv-scope. Эти поля будут затем идентифицированы с использованием их имени и области действия. У вас могут быть входы с одинаковыми именами в разных областях, и вы можете независимо отображать, очищать и проверять эти области.

Для удобства вы можете добавить атрибут data-vv-scope в форму, которая владеет входными данными, вам не нужно добавлять этот атрибут на каждый вход. Вы также можете передать свойство 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>

// событие клика, подтвердит форму1

  submit() {

        this.$validator.validateAll('form1').then(valid => {

                  if (valid) {


                  }
                   });
      }

Пожалуйста, обратитесь по следующей ссылке: https://baianat.github.io/vee-validate/examples/scopes.html

Answer 2

попробуйте, в вашем коде введите:

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

}

это подтвердит всю форму

Answer 3

Вы можете использовать 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!");
}