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

推薦する

HTML DOM入門_PowerNode Javaアカデミー

DOMとは何ですか? JavaScript を使用すると、HTML ドキュメント全体を再構築できます...

Windows での MySQL 5.7.18 インストール チュートリアル

この記事では、圧縮パッケージから MySQL をインストールする方法について説明します。 1. My...

Windows Server 2008R2 ファイル サーバーを Windows Server 2016 にアップグレードする

ユーザー組織には、ドメインに参加している 2 台の Windows Server 2008 R2 フ...

YUMを使用してdockerをインストールする方法

次の図に示すように: Centos 7.0以上であれば問題ありません。現在のシステム カーネル バー...

ウェブサイトのパフォーマンス: 画像とCookieの最適化、モバイルアプリケーションの最適化

前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォ...

MySQLユーザー管理操作例の分析

この記事では、MySQL ユーザー管理操作について説明します。ご参考までに、詳細は以下の通りです。こ...

JavaScript と JQuery フレームワークの基本チュートリアル

目次1. JS オブジェクトDOM –1、機能–2、テスト3. jQuery –1. 概要–2、使用...

win10 mysql 5.6.35 winx64 無料インストールバージョン設定チュートリアル

mysql 5.6.35 winx64無料インストールバージョン構成チュートリアルwin10、具体的...

CentOS VPS に SSH 経由で MySQL をインストールする方法

yum install mysql-serverと入力します。続行するにはYを押してくださいインスト...

Dockerコマンドは一般ユーザーが実行できるように実装されている

dockerをインストールすると、通常はdockerユーザーグループが作成されます。ステップ2: 現...

Alibaba Cloud Ubuntu 16.04 が IPSec サービスを構築

IPSec の概要IPSec (インターネット プロトコル セキュリティ): ネットワーク層と適用さ...

Vue3デスクトップアプリケーションの構築方法

この記事では、Vite を使用して Vue 3 デスクトップ プロジェクトを開発する方法について説明...

Dockerfileを使用してDockerイメージを構築する

目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...

ローカル画像サーバーのNginx構成の実装

目次1. Nginx の紹介2. 画像サーバーの構築1. Nginx の紹介Nginx はリバース ...

Docker可視化管理ツールであるDocker UIの使用

1. DockerUIの紹介DockerUI は Docker API をベースとしており、Dock...