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

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

以下もご興味があるかもしれません: