WeChatアプレットがフォーム検証を実装

'../../utils/WxValidate.js' から WxValidate をインポートします。

<フォームバインド送信="フォーム送信">
  <view class="weui-cells__title">ユーザー名</view>
<view class="weui-cells weui-cells_after-title">
  <view class="weui-cell weui-cell_input">
   <input class="weui-input" type="text" name="userName" placeholder="ユーザー名を入力してください"/>
  </ビュー>
</ビュー>
  <view class="weui-cells__title">パスワード</view>
<view class="weui-cells weui-cells_after-title">
  <view class="weui-cell weui-cell_input">
   <input class="weui-input" type="text" name="password" placeholder="パスワードを入力してください"/>
  </ビュー>
</ビュー>
  <view class="weui-cells__title">携帯電話番号</view>
<view class="weui-cells weui-cells_after-title">
  <view class="weui-cell weui-cell_input">
   <input class="weui-input" type="text" name="phone" placeholder="電話番号を入力してください"/>
  </ビュー>
</ビュー>
  <view class="btn-area">
    <button formType="submit">送信</button>
    <button formType="reset">リセット</button>
  </ビュー>
</フォーム>

 /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
 onLoad: 関数 (オプション) {
     this.initValidate()//検証ルール関数、フィールドルールとフィールドプロンプト情報を初期化します},
       
   初期化検証() {
     定数ルール = {
       userName: { //ユーザー名は必須: true,  
         最小長さ:2 
       },
       パスワード: { //パスワードが必要: true
       },
       phone:{ //携帯電話番号必須:true,
         電話: 本当
       }
     }
     const messages = { //プロンプト情報 userName: {
         必須: 「お名前を入力してください」
         minlength:'正しい名前を入力してください'
       },
       パスワード: {
         必須: 'パスワードを入力してください'
       },
       電話：{
         必須:「携帯電話番号を入力してください」
         電話:「正しい携帯電話番号を入力してください」
       }
     }
     this.WxValidate = 新しい WxValidate(ルール、メッセージ)
   },
   //検証関数formSubmitを呼び出す: function (e) {
     console.log('フォームで送信イベントが発生しました。送信されたデータは次のとおりです:', e.detail.value)
     定数パラメータ = e.detail.value
     //フォームをチェックする if (!this.WxValidate.checkForm(params)) {
       定数エラー = this.WxValidate.errorList[0]
       コンソール.log(エラー);
       偽を返す
     }
     コンソールログ("はい");
     true を返します。
},