個人的には、WeChat アプレットの開発フレームワークは VUE と概ね似ていると感じていますが、そのフォーム コンポーネントには独自の検証機能がありません。そのため、アプレットのフォーム検証を開発する場合、一般的に 2 つの方法があります。1 つは検証ルールを自分で記述することですが、これには正規表現の強固な基礎が必要です。もう 1 つは、公式コミュニティによって開発された WxValidate プラグインを使用してフォームを検証することです。
まず、プラグインのダウンロードアドレスと公式ドキュメントはWxValidateのダウンロードアドレスとドキュメントアドレスにあります。 WxValidate.js ファイルの具体的な場所は wx-extend/src/assets/plugins/ wx-validate /WxValidate.js です。 最初に紹介する方法は、プラグインファイルを必要なファイルディレクトリにコピーすることです。 その後、ローカル参照を使用して、必要なページのJSファイルにプラグインを導入することができます。具体的な操作は次のとおりです。 //index.js ページで、'../../utils/WxValidate.js' から WxValidate をインポートします const アプリ = getApp() ページ({ データ: { 形状: { 名前: ''、 電話: '' } } })
次に、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(){ ルール:{} メッセージ:{} }
次に検証ルールとエラールールのコードがあります // エラーを報告する 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({ メッセージ: '送信に成功しました' }) }
デモンストレーション効果を見てみましょう
WeChat ミニプログラム開発におけるフォーム検証のための WxValidate の使用に関するこの記事はこれで終わりです。ミニプログラム フォーム検証に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様の今後の 123WORDPRESS.COM へのご支援を心より願っております。 以下もご興味があるかもしれません:
|
>>: MySQL でデータの重複挿入を回避する 4 つの方法
DOMとは何ですか? JavaScript を使用すると、HTML ドキュメント全体を再構築できます...
この記事では、圧縮パッケージから MySQL をインストールする方法について説明します。 1. My...
ユーザー組織には、ドメインに参加している 2 台の Windows Server 2008 R2 フ...
次の図に示すように: Centos 7.0以上であれば問題ありません。現在のシステム カーネル バー...
前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォ...
この記事では、MySQL ユーザー管理操作について説明します。ご参考までに、詳細は以下の通りです。こ...
目次1. JS オブジェクトDOM –1、機能–2、テスト3. jQuery –1. 概要–2、使用...
mysql 5.6.35 winx64無料インストールバージョン構成チュートリアルwin10、具体的...
yum install mysql-serverと入力します。続行するにはYを押してくださいインスト...
dockerをインストールすると、通常はdockerユーザーグループが作成されます。ステップ2: 現...
IPSec の概要IPSec (インターネット プロトコル セキュリティ): ネットワーク層と適用さ...
この記事では、Vite を使用して Vue 3 デスクトップ プロジェクトを開発する方法について説明...
目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...
目次1. Nginx の紹介2. 画像サーバーの構築1. Nginx の紹介Nginx はリバース ...
1. DockerUIの紹介DockerUI は Docker API をベースとしており、Dock...