個人的には、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 つの方法
目次1. Tsとは何か2. 基本的な文法1. プリミティブデータ型を宣言する2. オブジェクト型を宣...
目次序文環境インストールMySQLコンテナを作成して起動する思い出させるMySQLコンテナコマンドを...
テーブルを切り捨てる個々の行の削除をログに記録せずに、テーブル内のすべての行を削除します。文法 テー...
Vueのメソッドとプロパティ1. 方法使用法 1メソッド: {メソッド名: function(){}...
失敗の原因今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があ...
目次序文: 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文: MySQL データベー...
序文MySQL では、EXPLAIN コマンドを使用して、テーブルの接続方法や SELECT ステー...
序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...
Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と rout...
最近、宿題をしているときに、iframe を使用せずにページをネストする必要があったため、jquer...
オリジナルリンクhttps://github.com/XboxYan/no…ボタンは、おそらく We...
この記事では、Spring boot + Maven プロジェクトのデプロイメントを例に、Code ...
CEP - 複合イベント処理。ご注文後、一定期間内にお支払いの確認が取れませんでした。タクシーの配...
目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...
パスワードを忘れると困ります。Mac に MySQL をインストールするための初期パスワードを忘れて...