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

推薦する

Typescriptの基本構文13個を共有する

目次1. Tsとは何か2. 基本的な文法1. プリミティブデータ型を宣言する2. オブジェクト型を宣...

MySQL の Docker インストールと設定手順

目次序文環境インストールMySQLコンテナを作成して起動する思い出させるMySQLコンテナコマンドを...

Truncate Table の使用法の説明

テーブルを切り捨てる個々の行の削除をログに記録せずに、テーブル内のすべての行を削除します。文法 テー...

Vueのメソッドとプロパティの詳細な説明

Vueのメソッドとプロパティ1. 方法使用法 1メソッド: {メソッド名: function(){}...

CSS のオーバーフロー:hidden エラーの解決方法

失敗の原因今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があ...

MySQL DEFINER の使用方法の詳細な説明

目次序文: 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文: MySQL データベー...

EXPLAIN を使って MySQL の SQL 実行プランを分析する方法

序文MySQL では、EXPLAIN コマンドを使用して、テーブルの接続方法や SELECT ステー...

MySQL インデックスクエリ最適化スキルを習得するための記事

序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...

ログインフォームを実装するためのReactサンプルコード

Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と rout...

iframe なしの div ネスト HTML

最近、宿題をしているときに、iframe を使用せずにページをネストする必要があったため、jquer...

パーティクルダイナミックボタン効果を実現するCSS

オリジナルリンクhttps://github.com/XboxYan/no…ボタンは、おそらく We...

CentOS7 で Jenkins+Maven+Git 継続的インテグレーション環境を構築する方法

この記事では、Spring boot + Maven プロジェクトのデプロイメントを例に、Code ...

Apache FlinkCEP でタイムアウトステータス監視を実装するための詳細な手順

CEP - 複合イベント処理。ご注文後、一定期間内にお支払いの確認が取れませんでした。タクシーの配...

JS ES6コーディング標準の詳細な説明

目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...

MacにMySQLをインストールするときに初期パスワードを忘れた場合の対処方法

パスワードを忘れると困ります。Mac に MySQL をインストールするための初期パスワードを忘れて...