Vueで検証プロンプトをクリアする方法

Vue.js では、フォーム検証プラグインを使用してフォーム検証エラーをキャプチャします。ただし、フォーム検証エラーをクリアする必要がある状況もあります。この記事では、Vue.js コードを通じてフォーム検証プロンプトをクリアする方法について説明します。

Vue.js フォーム検証について理解する

Vue.js フォーム検証は、フォーム モデルと検証ルールという 2 つの重要な要素に依存します。フォーム モデルはフォーム データを保存および制御するオブジェクトであり、検証ルールはフォーム データの整合性と正確性を保証するためにフォームに定義された 1 つ以上のルールです。

Vue.js では、Velidate フォーム検証ライブラリを使用してフォーム検証ルールを定義します。たとえば、入力フィールドが空でないことを確認するルールを定義できます。

validations: {
  name: {
    required: validators.required,
  },
}

このルールは、name フィールドが空かどうかを確認し、空の場合はエラー メッセージを表示します。 。デフォルトでは、エラー メッセージはフォーム フィールドの下に自動的に表示されます。

フォーム検証プロンプトをクリアする

ここで、ユーザーがデータの入力を再開できるように、エラー メッセージをクリアする必要があるとします。メッセージをクリアするには、フォーム コントロールの検証ステータスにアクセスし、それを「未検証」としてマークする必要があります。

Vue.js では、次の手順を使用してフォーム検証プロンプトをクリアできます。

1. this.$v## を通じてフォーム モデルにアクセスします。 # 検証オブジェクトはフォームのすべての検証ステータスを取得します。

   const validationState = this.$v;

2. setPropagationメソッドを使用して、検証を子コンポーネントに渡すかどうかを決定します。ここでは、現在のフォーム コントロールの検証ステータスのみがクリアされるように、「詳細な検証」を無効にします。

   validationState.$touch();
   validationState.$setDirty();
   validationState.$setChildrenDirty(true);

3. 検証ステータスを「未検証」ステータスに設定します。

   validationState.name.$touch();

4. 必要に応じて、フォーム コントロールからエラー メッセージを削除できます。

   validationState.$reset();

完全なコードは次のとおりです。

methods: {
  clearValidation() {
    const validationState = this.$v;
    validationState.$touch();
    validationState.$setDirty();
    validationState.$setChildrenDirty(true);
    validationState.name.$touch();
    validationState.$reset();
  },
},

フォーム検証エラーをクリアする必要がある場合は、

clearValidation メソッドを呼び出すだけです。

結論

Vue.js では、

Vuelidate プラグインを使用してフォーム検証を実装できます。ただし、ユーザーがデータの入力を再開できるように、フォーム検証プロンプトをクリアする必要がある場合があります。フォーム コントロールの検証ステータスにアクセスし、それを「未検証」としてマークすることで、フォーム検証エラーを簡単にクリアできます。

以上がVueで検証プロンプトをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。