要素複数フォーム検証の実装

要素複数フォーム検証の実装

プロジェクトでは、フォーム テストが頻繁に発生します。単一のフォーム テストについては、詳細な紹介が記載されている要素の公式 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue ElementUI フォームのフォーム検証
  • Vue Element-ui フォーム検証ルールの実装
  • Vue element-ui親コンポーネントは子コンポーネントのフォーム検証操作を制御します。
  • 要素UIフォーム検証ルールの構成の詳細な説明一般的なブラックテクノロジー
  • Vue elementUI フォーム検証実装コード (多層ネスト)
  • Vue elementUI フォーム検証関数配列の多層ネスト
  • Vue+elementでフォーム検証機能を実現
  • v-for ループによってレンダリングされたフォーム検証の要素実装

<<:  Centos7 に mysql 8.0.13 (rpm) をインストールする詳細なチュートリアル

>>:  Linux で毎日データベースの自動バックアップを設定する方法

推薦する

Bootstrap5 ブレークポイントとコンテナの具体的な使用法

目次1. Bootstrap5 ブレークポイント1.1 モバイルファースト1.2 ブートストラップブ...

Win10 での MySQL 8.0.16 のインストールと設定のチュートリアル

1. MySQL 8.0.16を解凍する次の図に示すように、解凍後にdadaフォルダとmy.ini構...

MySQL の 4 つのトランザクション分離レベルを例を使って分析する

序文データベース操作では、同時データ読み取りの正確性を効果的に保証するために、トランザクション分離レ...

Windows 10 で MySQL をダウンロードするための詳細なチュートリアル

MySQL のバージョンは、Enterprise Edition と Community Editi...

mysql5.5.28 のインストール チュートリアルは非常に詳細です。

参考までにmysql5.5.28のインストールチュートリアルです。具体的な内容は次のとおりです。イン...

Linux での MySQL マルチインスタンスの展開とインストール ガイド

MySQLマルチインスタンスとは簡単に言うと、MySQL マルチインスタンスとは、サーバー上で複数の...

見栄えの良い CSS カスタム スタイル (タイトル h1 h2 h3)

レンダリングBlog Gardenでよく使われるスタイル /*タイトル h1 h2 h3 スタイル*...

エージェントを介したzabbix監視プロセスとポートの詳細なプロセス

環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...

Docker 構成 Alibaba Cloud イメージアクセラレーション プル実装

今日はdockerを使ってイメージをpullしたのですが、速度が悪くて見れず最後まで待ち続けました。...

CocosCreator 入門チュートリアル: ネットワーク通信

ネットワーク通信の概要オンライン ゲームを開発する場合、必然的にネットワーク通信に対処する必要があり...

フロントエンド開発に必須:推奨されるブラウザ互換性テストツール 12 選

フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...

MySQLの再帰問題

MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...

MySQL 5.7 でブロックポジショニング DDL の問題を解決する

前回の記事「MySQL テーブル構造の変更、メタデータ ロックを知っておく必要があります」では、MD...

Linux での wget コマンドの基本的な使い方

目次序文1. wgetを使用して単一のファイルをダウンロードする2. wget -Oを使用してダウン...

Alibaba Cloud OSS によってアップロードされた Nginx プロキシ転送実装コード

序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...