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

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

プロジェクトでは、フォーム テストが頻繁に発生します。単一のフォーム テストについては、詳細な紹介が記載されている要素の公式 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 で毎日データベースの自動バックアップを設定する方法

推薦する

MAC での MYSQL5.7.17 接続失敗の問題と解決策

MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...

IE で UTF8 エンコードされたページで行が理由もなく空白のままになり、UTF8 ページが表示されない問題の解決方法

理由は、すべてのファイルが utf8 でエンコードされているためです。ファイルがインクルードされると...

Vue で Axios 非同期リクエスト API を使用する方法

目次基本的なHTTPリクエストの設定async/await を使用した Axios Axios によ...

MySql インデックスを表示および最適化する方法

MySQL はハッシュ インデックスと Btree インデックスをサポートしています。 InnoDB...

WeChatアプレットが検索ボックス機能を実装

この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに...

Elementはスクリプトを使用して新しいコンポーネントを自動的に構築します

目次背景element-ui の自動構築はどのように機能しますか?メイクファイル新しい.jsファイル...

el-table のテーブルを最適化するために仮想リストを使用する方法についての簡単な説明

目次序文解決具体的な実装満たすべき前提条件質問序文テーブルをよく使用します。データ量が多い場合は直接...

MySQL InnoDBセカンダリインデックスのソート例の詳細な説明

ソート問題最近、Geek Time の「45 Lectures on MySQL Practice」...

HTML thead タグの定義と使用法の詳細な紹介

コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...

Rails APIを使用してReactアプリケーションを構築するための詳細な手順

目次バックエンド: Rails API部分フロントエンド: React部分Reactコンポーネントa...

入力タグの名前と値の違い

type はブラウザでの入力と出力に使用されるコントロールです (たとえば、type="t...

ウェブデザインと制作の一般的な原則をまとめる

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...

Ubuntuの基本設定: openssh-serverのインストールと使用

Ubuntu 17.10 での openssh-server のインストールと使用を記録します。イン...

Jenkins統合Dockerプラグインの問題を解決するいくつかの方法

目次背景質問1エラー 2エラー 3エラー4要約する背景テスト環境では、docker プラグインを統合...

Tomcat を設定して IntelliJ IDEA 2018 で最初の Java Web プロジェクトを実行する方法

1 Tomcatをダウンロードして起動する公式サイト http://tomcat.apache.or...