要素フォーム検証で検証プロンプトをクリアする方法

問題のシナリオ:

最近、プロジェクトを開発しているときに、次のような問題に遭遇しました。
フォーム フィールドのデータをチェックするときに、特別な項目が 1 つあります。これは、単純な入力ボックスやドロップダウン ボックスなどのフォーム要素ではなく、自分で作成した el-table 選択ポップアップ ウィンドウです。私のチェック方法は次のとおりです。

プロトコルID:
   { 必須: true、メッセージ: '解析プロトコルを選択してください'、トリガー: 'blur'}、
]、

これで検証機能は実現できますが、問題が発生します。検証条件 (送信ボタン) がトリガーされ、エラー メッセージが表示された場合、送信ボタンが再度クリックされて検証がトリガーされないため、後でデータを再選択してもエラー メッセージが残ります。このユーザーエクスペリエンスはあまり良くありません。

解決：

1. フィールドを個別にチェックする

[保存] ボタンをクリックすると検証がトリガーされ、通常はすべてのフィールドが検証されます。element element-uiのformコンポーネントには、フィールドを検証する関数も用意されており、次のように使用できます。

this.$refs.addForm.validateField('protocolId', (有効) => {
 	//validはルールセットに書かれたエラーメッセージを返します。条件が満たされた場合、戻り値は空です。if (!valid) {
         戻る 
     }
 })

上記のコードは、データ選択を確認する関数内で実行することができ、この特別なコンテンツが再度チェックされます。検証ルールを満たしている場合は、エラー プロンプトが消えます。

2. フォームフィールドの下のフィールドのプロンプト情報を直接クリアする

this.$refs.addForm.clearValidate();

この方法は、何も判断せずにエラーメッセージを直接クリアする方法です。個人的にはお勧めしません。

これで、要素フォーム検証の検証プロンプトをクリアする方法に関するこの記事は終了です。要素フォーム検証の検証プロンプトをクリアする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。