web-dev-qa-db-ja.com

Vue.jsVee要素のスコープ内で検証を行う方法を検証します

プロジェクトの検証に VeeValidate プラグインを使用しています。

これは私が検証しようとしている私のフォームです。

enter image description here

保存ボタンのすべてのフィールドを検証する場合

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

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

この種の機能が役立ちます。

しかし、大学とコースを追加ボタンで検証したい場合はどうなりますか？すべてを検証する代わりに、その2つのフィールド名のみを渡す方法があります（uniとcou）検証のために？

validationvue.jsvuejs2vee-validate
3
Pathum Kalhan

この機能を実現するには、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/>

ここで、これらのフィールドを検証するために、次のようにvalidateAllメソッドにdata-vv-scope値を渡すだけです。

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

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

2つのフィールドのみを検証するには、これらの入力で属性data-vv-scope = "university"を使用して、次のようにします。

this。$ validator.validate（ "university"）。then（（isValid）=> {
 if（isValid）{
 ... 
} 
} ）

すべてのスコープのすべてのフィールドを同時に検証する場合：

this。$ validator.validateScopes（）。then（（isValid）=> {
 if（isValid）{
 ... 
} 
}）
0
elenamf86

それを試してみてください、あなたのコードにこれを入れてください：

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

}

これはすべてのフォームを検証します

0
Andres Solarte

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

0
Eliecer Narvaez