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

推薦する

要素の属性を削除する JS removeAttribute() メソッド

JavaScript では、要素の removeAttribute() メソッドを使用して、指定され...

Tomcat マルチポートドメイン名アクセスと gzip 圧縮方式を有効にする構成

1. デフォルトのポート8080に加えて、ドメイン名のアクセスとserver.xmlのオープンにポー...

CSSの4種類の配置の違いの詳細な説明

フロントエンド開発でよく使われるCSSの配置方法は、位置決めには、通常位置決め、相対位置決め、絶対位...

CSS を使用して半透明の背景と不透明なテキストを実現する例

この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...

初心者向けウェブサイト構築ガイド⑦:美しいウェブサイトを作るのはとっても簡単

私はかつて、ウェブサイトを一度も構築したことのない人々が、初心者向けのウェブサイト構築方法に関する私...

誰もが知っておくべきウェブサイトのユーザビリティに関する 10 のヒント

これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加するこれには 2 ...

Vue シングルファイルコンポーネントの実装

最近、vue について読みました。これまで基本的に見落としていた単一ファイル コンポーネントを見つけ...

Nginx でアクセス頻度、ダウンロード速度、同時接続数を制限する方法

1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...

MySQLでテーブル名を変更する方法と注意すべき点

目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...

Zabbixを介してデータベース接続情報といくつかの拡張機能をすばやく取得します

背景アプリケーション システムの数が増え続けると、当初はアラームを発していなかったアクティブ スレッ...

Linux でユーザーにルート権限を追加する方法の概要

1. ユーザーを追加します。まず、adduser コマンドを使用して共通ユーザーを追加します。コマン...

MySQL 文字列インデックスのより合理的な作成ルールに関する議論

序文MySQL インデックスの使用に関しては、これまでインデックスの最左接頭辞ルール、インデックス ...

WeChat アプレットカスタムタブバーステップ記録

目次1. はじめに2. タブバーのスタイルをカスタマイズする3. カスタムタブバーと関連設定を導入す...

プロジェクトの再構築からプロジェクトにおける CSS3 カスタム変数の使用について話す

CSS3変数について変数を宣言するときは、変数名の前に 2 つのハイフン ( -- ) を追加します...