プロジェクトでは、フォーム テストが頻繁に発生します。単一のフォーム テストについては、詳細な紹介が記載されている要素の公式 Web サイトのドキュメントを参照できます。ここでは、実際のプロジェクトで複数のフォームを同時にチェックした経験と解決策を共有します。皆さん、メッセージを残して、関連技術について一緒に話し合ってください。ぜひアドバイスをください。 この問題を解決するために、ここでは主に Promise が使用されます。 Promise メソッドを抽象的に理解するために例を見てみましょう。 週末に火鍋を食べたいなら、シャオ・アに電話して、私の家に火鍋を食べに来るように伝えてください。シーフード以外の料理はすべて準備ができています。来るときにいくつか持ってきてください。それから、友達のシャオ B に電話して、私の家に火鍋を食べに来るように頼みました。海鮮はありますが、肉が足りません。来るときに持ってきてください。それから私は友人のシャオCに電話しました。「私の家に来て火鍋を食べよう。料理は全部あるし、ワインももうすぐ終わる。来たらボトルを何本か持ってきてね。」まだ鍋の素が足りていません。携帯電話を取り出して電話しました。「小D、手伝いに来て。みんなどうしてここにいるの?電気コンロが調子が悪いの。準備は万端。コンロと素の袋を持ってきてくれないか?」 鍋を食べるのが定番になりました。とても美味しいです。 しかし、この件。物事はいつもうまくいくとは限らないし、来られない人もいるでしょう?来られなかったら鍋を楽しむこともできません。 実際、複数のフォームの検証もこれに似ています。各フォームは 1 回ずつ尋ねられます。全員が合格すれば満足です。検証の 1 つが失敗した場合は、申し訳ありませんが、まずはユーザーに正しく入力するように伝える必要があります。 Promise を通じて、各フォームでクエリ検出が実行されます。結果に関係なく、最初に Promise.all を入力し、すべてのフォームがクエリされるまで待機します。すべてが OK の場合は、トリガーします。これは素晴らしいことです。逆に、catch で実行が失敗した場合、応答は正常です。 const フォーム名 = ['tableForm1', 'tableForm2', 'tableForm3'] const は (item) を検証します => { 新しい Promise を返します ((resolve, reject) => { if (!this.$refs[item]) { 解決する() 偽を返す } this.$refs[item].validate((valid) => { (有効)の場合{ 解決する() } それ以外 { 拒否(新しいエラー('検証が正しくありません')) } }) }) } Promise.all(formName.map(item => validates(item))).then(() => { console.log('成功') }).catch(() => { console.log('失敗') }) } } 最後に、完全なコードを以下に示します。 <div class="home"> <el-form :model="tableForm1" ref="tableForm1" :rules="rules1" label-width="100px" > <el-form-item label="価格" prop="価格"> <el-input v-model.number="tableForm1.price" オートコンプリート="オフ"></el-input> </el-form-item> </el-form> <el-form :model="tableForm2" ref="tableForm2" :rules="rules2" label-width="100px" > <el-form-item label="年齢" prop="年齢"> <el-input v-model.number="tableForm2.age" オートコンプリート="オフ"></el-input> </el-form-item> </el-form> <el-form :model="tableForm3" ref="tableForm3" :rules="rules3" label-width="100px" > <el-form-item label="名前" prop="名前"> <el-input v-model.number="tableForm3.name" オートコンプリート="オフ"></el-input> </el-form-item> </el-form> <el-button type="primary" @click="submitForm">送信</el-button> <el-button @click="resetForm">リセット</el-button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'ホーム'、 データ () { 戻る { テーブルフォーム1: { 価格: '' }, テーブルフォーム2: { 年: '' }, テーブルフォーム3: { 名前: '' }, ルール1: { 価格: [{ 必須: true、メッセージ: '価格は空欄にできません'、トリガー: 'blur' }] }, ルール2: { 年齢: [{ 必須: true、メッセージ: '年齢は空欄にできません'、トリガー: 'blur' }] }, ルール3: { 名前: [{ 必須: true、メッセージ: '名前は空にできません'、トリガー: 'blur' }] } } }, メソッド: { リセットフォーム(){ this.$refs.tableForm1.resetFields() this.$refs.tableForm2.resetFields() this.$refs.tableForm3.resetFields() }, 送信フォーム(){ const フォーム名 = ['tableForm1', 'tableForm2', 'tableForm3'] const は (item) を検証します => { 新しい Promise を返します ((resolve, reject) => { if (!this.$refs[item]) { 解決する() 偽を返す } this.$refs[item].validate((valid) => { (有効)の場合{ 解決する() } それ以外 { 拒否(新しいエラー('検証が正しくありません')) } }) }) } Promise.all(formName.map(item => validates(item))).then(() => { console.log('成功') }).catch(() => { console.log('失敗') }) } } } </スクリプト> 要素における複数のフォーム検証の実装に関するこの記事はこれで終わりです。より関連性の高い要素フォーム検証コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Centos7 に mysql 8.0.13 (rpm) をインストールする詳細なチュートリアル
>>: Linux で毎日データベースの自動バックアップを設定する方法
目次1. Bootstrap5 ブレークポイント1.1 モバイルファースト1.2 ブートストラップブ...
1. MySQL 8.0.16を解凍する次の図に示すように、解凍後にdadaフォルダとmy.ini構...
序文データベース操作では、同時データ読み取りの正確性を効果的に保証するために、トランザクション分離レ...
MySQL のバージョンは、Enterprise Edition と Community Editi...
参考までにmysql5.5.28のインストールチュートリアルです。具体的な内容は次のとおりです。イン...
MySQLマルチインスタンスとは簡単に言うと、MySQL マルチインスタンスとは、サーバー上で複数の...
レンダリングBlog Gardenでよく使われるスタイル /*タイトル h1 h2 h3 スタイル*...
環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...
今日はdockerを使ってイメージをpullしたのですが、速度が悪くて見れず最後まで待ち続けました。...
ネットワーク通信の概要オンライン ゲームを開発する場合、必然的にネットワーク通信に対処する必要があり...
フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...
MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...
前回の記事「MySQL テーブル構造の変更、メタデータ ロックを知っておく必要があります」では、MD...
目次序文1. wgetを使用して単一のファイルをダウンロードする2. wget -Oを使用してダウン...
序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...