WeChat アプレット開発フォーム検証 WxValidate の使用

WeChat アプレット開発フォーム検証 WxValidate の使用

個人的には、WeChat アプレットの開発フレームワークは VUE と概ね似ていると感じていますが、そのフォーム コンポーネントには独自の検証機能がありません。そのため、アプレットのフォーム検証を開発する場合、一般的に 2 つの方法があります。1 つは検証ルールを自分で記述することですが、これには正規表現の強固な基礎が必要です。もう 1 つは、公式コミュニティによって開発された WxValidate プラグインを使用してフォームを検証することです。

WxValidate プラグインは、jQuery Validate を参照してカプセル化されています。携帯電話番号、電子メール検証など、ミニプログラム フォームでよく使用される検証ルールのセットを提供します。また、フォーム検証を容易にするためにカスタム検証を追加する方法も提供します。

まず、プラグインのダウンロードアドレスと公式ドキュメントはWxValidateのダウンロードアドレスとドキュメントアドレスにあります。

WxValidate.js ファイルの具体的な場所は wx-extend/src/assets/plugins/ wx-validate /WxValidate.js です。

最初に紹介する方法は、プラグインファイルを必要なファイルディレクトリにコピーすることです。

その後、ローカル参照を使用して、必要なページのJSファイルにプラグインを導入することができます。具体的な操作は次のとおりです。

//index.js ページで、'../../utils/WxValidate.js' から WxValidate をインポートします
const アプリ = getApp()
ページ({
  データ: {
    形状: {
      名前: ''、
      電話: ''
    }
  }
})

ここで注意する必要があるのは、ファイルパスの書き方です

/ はルートディレクトリからカウントされます。/ はインポートしたファイルのディレクトリファイルからカウントされ、この場合は index.js があるディレクトリからカウントされます。./ はインポートしたファイルの親ディレクトリからカウントされ、この場合は index フォルダーディレクトリからカウントされ、../../ は pages があるディレクトリからカウントされます。ここでのファイルパスが誤って記述されている場合、コンパイル時にエラーが報告されます。

次に、wxml ファイル内のフォーム コンポーネントのデータ バインディングに注意してください。そうしないと、フォーム コンポーネントがどのように入力されてもルールを検証できません。

フォームコンポーネントのバインディング方法は次のとおりです。

//wxml ページ <form bindsubmit="formSubmit">
    <view class="weui-cells__title">個人情報を入力してください</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
          <view class="weui-label">名前</view>
        </ビュー>
        <view class="weui-cell__bd">
          <input class="weui-input" name='name' value='{{form.name}}' placeholder="お名前を入力してください" />
        </ビュー>
      </ビュー>
      <view class="weui-cell weui-cell_input weui-cell_vcode">
        <view class="weui-cell__hd">
          <view class="weui-label">携帯電話番号</view>
        </ビュー>
        <view class="weui-cell__bd">
          <input class="weui-input" name='phone' type='number' value='{{form.phone}}' placeholder="電話番号を入力してください" />
        </ビュー>
        </ビュー>
    </ビュー>
</フォーム>

主な方法は、検証する必要がある入力ボックスに値バインディングを追加することであり、他のコンポーネントにも同じことが適用されます。

次に、フォームバインディングをjsファイルに追加します。

//index.js
ページ({
  データ: {
    形状: {
      名前: ''、
      電話: ''
    }
  }
})

次に最も重要な検証ルールの記述です

まず、onLoad関数に検証ルール関数を追加する必要があります。

// onLoadには複数の関数があります。onLoad関数内に関数名を記述し、onLoadの外で関数を定義します。onLoad() {
    this.getuser()
    this.initValidate()//検証ルール関数}
 
//OnLoadには関数が1つだけあります onLoad:function(){
    ルール:{}
    メッセージ:{}
    }

ここで注意すべきことは、onLoad検証ルールがjsファイルに含まれている必要があるということです。そうでない場合、コンパイル時にcheckformが関数ではないと報告されます。

次に検証ルールとエラールールのコードがあります

// エラーを報告する showModal(error) {
    wx.showModal({
      内容: error.msg、
      表示キャンセル: false、
    })
  },
//検証関数 initValidate() {
    定数ルール = {
      名前: {
        必須: true、
        最小長さ:2
      },
      電話:{
        必須:true、
        電話: 本当
      }
    }
    定数メッセージ = {
      名前: {
        必須: 「お名前を入力してください」
        minlength:'正しい名前を入力してください'
      },
      電話:{
        必須:「携帯電話番号を入力してください」
        電話:「正しい携帯電話番号を入力してください」
      }
    }
    this.WxValidate = 新しい WxValidate(ルール、メッセージ)
  },
//検証関数formSubmitを呼び出す: function(e) {
    console.log('フォームで送信イベントが発生しました。送信されたデータは次のとおりです:', e.detail.value)
    定数パラメータ = e.detail.value
    //フォームをチェックする if (!this.WxValidate.checkForm(params)) {
      定数エラー = this.WxValidate.errorList[0]
      this.showModal(エラー)
      偽を返す
    }
    this.showModal({
      メッセージ: '送信に成功しました'
    })
  }

ここではフィールド検証について少しだけ書きました。公式ドキュメントにも多くのフィールド検証ルールが記載されているので、一つ一つ書き出すことはしません。ここで注意すべき点は、オブジェクトはinitValidate()でインスタンス化する必要があることです。ここまででフォーム検証は完了しています。

デモンストレーション効果を見てみましょう

デモンストレーション効果

上記でダウンロードした例を実行することもできます。この例では、フォーム検証効果がさらに強化されています。

WeChat ミニプログラム開発におけるフォーム検証のための WxValidate の使用に関するこの記事はこれで終わりです。ミニプログラム フォーム検証に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様の今後の 123WORDPRESS.COM へのご支援を心より願っております。

以下もご興味があるかもしれません:
  • WeChatアプレットがフォーム検証を実装
  • WeChat アプレット フォーム検証 WxValidate の使用
  • WeChat アプレットフォーム検証プラグイン WxValidate 二次パッケージ機能 (究極版)
  • アプレットの簡単なログイン登録フォーム検証の詳細説明
  • WeChatアプレットフォーム検証フォーム送信エラープロンプト効果
  • WeChat アプレット フォーム検証機能の完全な例
  • WeChatアプレットフォーム検証エラープロンプト効果

<<:  nginxで静的リソースを公開する方法

>>:  MySQL でデータの重複挿入を回避する 4 つの方法

推薦する

C++ を使用して MySQL に接続する方法

C++でMySQLに接続する際の参考情報です。具体的な内容は以下のとおりです。 MySQLCon ク...

MySQL Community Server 圧縮パッケージのインストールと設定方法

今日は、MySQL をインストールしたかったので、公式 Web サイトにアクセスして、MySQL の...

MySql マスタースレーブレプリケーションの実装原理と構成

データベースの読み取りと書き込みの分離は、トラフィック量の多い大規模システムやインターネット アプリ...

一般的な Linux ディストリビューションのミラーソース構成の概要

最近 Linux を研究していて、いくつかの Linux ディストリビューションを試してみましたが、...

proxy_pass がパス パスに従って転送する場合の "/" 問題の詳細な説明

nginx で proxy_pass を設定するときに、^~ に従ってパスを一致させる場合は、pro...

単一選択折りたたみメニュー機能を実現するCSS

前回の「最もシンプルなスイッチを実現するCSS」のように、HTML5とCSS3でほとんどの機能をすで...

MySQL 8.0.16 圧縮版のダウンロードと Win10 システムへのインストール チュートリアル

公式サイトからダウンロード: https://www.mysql.com MySQLの公式サイトにア...

Linux での Nginx 監視の問題

nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...

Vueはシンプルな画像切り替え効果を実装します

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。 コー...

mysqlを使用して、URLから返されたhttp GETリクエストデータを記録します。

ビジネスシナリオの要件と実装ロジックの分析ビジネスでは、HTTP GET を使用してデータを要求する...

Dockerデーモンのセキュリティ設定項目の詳細な説明

目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...

Vue2.0/3.0双方向データバインディングの実装原理の詳細説明

Vue2.0/3.0双方向データバインディングの実装原理双方向データバインディングとは、データの変更...

MySQL トリガーの紹介、トリガーの作成、使用制限の分析

この記事では、例を使用して、MySQL トリガーの概要、トリガーの作成方法、およびトリガーの使用上の...

Centos7 FFmpeg オーディオ/ビデオ ツールのインストールに関する簡単なドキュメント

ffmpeg は非常に強力なオーディオおよびビデオ処理ツールです。公式 Web サイトは http:...

MySQL の遅いクエリの落とし穴

目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....