個人的には、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 つの方法
JavaScript では、要素の removeAttribute() メソッドを使用して、指定され...
コードをコピーコードは次のとおりです。 <div contenteditable="...
1. デフォルトのポート8080に加えて、ドメイン名のアクセスとserver.xmlのオープンにポー...
フロントエンド開発でよく使われるCSSの配置方法は、位置決めには、通常位置決め、相対位置決め、絶対位...
この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...
私はかつて、ウェブサイトを一度も構築したことのない人々が、初心者向けのウェブサイト構築方法に関する私...
これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加するこれには 2 ...
最近、vue について読みました。これまで基本的に見落としていた単一ファイル コンポーネントを見つけ...
1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...
目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...
背景アプリケーション システムの数が増え続けると、当初はアラームを発していなかったアクティブ スレッ...
1. ユーザーを追加します。まず、adduser コマンドを使用して共通ユーザーを追加します。コマン...
序文MySQL インデックスの使用に関しては、これまでインデックスの最左接頭辞ルール、インデックス ...
目次1. はじめに2. タブバーのスタイルをカスタマイズする3. カスタムタブバーと関連設定を導入す...
CSS3変数について変数を宣言するときは、変数名の前に 2 つのハイフン ( -- ) を追加します...