プロジェクトでは、フォーム テストが頻繁に発生します。単一のフォーム テストについては、詳細な紹介が記載されている要素の公式 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 で毎日データベースの自動バックアップを設定する方法
MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...
理由は、すべてのファイルが utf8 でエンコードされているためです。ファイルがインクルードされると...
目次基本的なHTTPリクエストの設定async/await を使用した Axios Axios によ...
MySQL はハッシュ インデックスと Btree インデックスをサポートしています。 InnoDB...
この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに...
目次背景element-ui の自動構築はどのように機能しますか?メイクファイル新しい.jsファイル...
目次序文解決具体的な実装満たすべき前提条件質問序文テーブルをよく使用します。データ量が多い場合は直接...
ソート問題最近、Geek Time の「45 Lectures on MySQL Practice」...
コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...
目次バックエンド: Rails API部分フロントエンド: React部分Reactコンポーネントa...
type はブラウザでの入力と出力に使用されるコントロールです (たとえば、type="t...
<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...
Ubuntu 17.10 での openssh-server のインストールと使用を記録します。イン...
目次背景質問1エラー 2エラー 3エラー4要約する背景テスト環境では、docker プラグインを統合...
1 Tomcatをダウンロードして起動する公式サイト http://tomcat.apache.or...