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 つの方法

推薦する

Windows 10 での MySQL 5.7.19 インストール チュートリアル MySQL のルート パスワードを忘れた場合の変更方法

MySQL 5.7.19のインストールを例に挙げると、まずダウンロードしますもちろん、最初に行うこと...

Vue はボタンをクリックしてファイルをダウンロードする操作コードを実装します (バックエンド Java)

前回の記事では、ボタンをクリックしてファイルをダウンロードするVueの機能を紹介しました。今日は、ボ...

MySQL の簡単な分析 - MVCC

バージョンチェーンInnoDB エンジン テーブルでは、クラスター化インデックス レコードに 2 つ...

MySQLデータベースインデックスの詳細な紹介

目次マインドマップシンプルな理解インデックスモデルの進化二分探索木自己バランス型二分木BツリーB+ ...

Linuxの運用・保守の基礎知識から上級者向け知識までをまとめました

運用保守エンジニアは、初期段階では非常に大変な仕事です。この期間中、コンピューターの修理、ネットワー...

mysql5.7 の新しい json フィールド タイプの使用例の分析

この記事では、MySQL 5.7 で追加された json フィールド タイプの使用方法を例を使って説...

Docker イメージのデフォルトの保存場所を変更する方法 (ソリューション)

システムの初期のパーティション分割により、オペレーティング システム内の対応する / パーティション...

レスポンシブデザインについての簡単な説明

1. レスポンシブ デザインとは何ですか?レスポンシブデザインとは、ウェブサイトの開発プロセス中に、...

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

プロジェクトでは、フォーム テストが頻繁に発生します。単一のフォーム テストについては、詳細な紹介が...

LinuxでIPを表示する方法の例

ネットワークの問題のトラブルシューティング、新しい接続のセットアップ、ファイアウォールの構成を行うと...

よくある CSS のヒントと経験談 11 選

1. 画像の下にある数ピクセルの空白を削除するにはどうすればよいですか?コードをコピーコードは次のと...

Dockerでのpython3.8イメージのインストールについて

Docker Hub公式サイト1. Pythonミラーを検索するdocker 検索 python 2...

CentOS 6.8 での Hadoop 3.1.1 完全分散インストール ガイド (推奨)

上記:このドキュメントは、3 台の仮想マシンが相互に ping を実行できること、ファイアウォールが...

JavaScript デザインパターン 責任連鎖パターン

目次概要コードの実装パラメータ定義成し遂げる責任連鎖パターンの実装改善概要責任チェーン パターンは、...