微信小程序?qū)崿F(xiàn)表單驗(yàn)證

更新時(shí)間：2021年04月23日 11:52:00 作者：Harris-H

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)表單驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

微信小程序的表單驗(yàn)證，供大家參考，具體內(nèi)容如下

需要用到一個(gè)插件WxValidat.js

傳送門(mén)

在需要使用的page js文件下導(dǎo)入

import WxValidate from '../../utils/WxValidate.js'

主要內(nèi)容

WXML內(nèi)容

<form bindsubmit="formSubmit">
  <view class="weui-cells__title">用戶(hù)名</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="請(qǐng)輸入用戶(hù)名"/>
  </view>
</view>
  <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="請(qǐng)輸入密碼"/>
  </view>
</view>
  <view class="weui-cells__title">手機(jī)號(hào)</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="請(qǐng)輸入手機(jī)號(hào)"/>
  </view>
</view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

js內(nèi)容

 /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
 onLoad: function (options) {
     this.initValidate()//驗(yàn)證規(guī)則函數(shù),初始化字段規(guī)則和字段提示信息
   },
       
   initValidate() {
     const rules = {
       userName: { //用戶(hù)名
         required: true,  
         minlength:2 
       },
       password: { //密碼
         required: true
       },
       phone:{ //手機(jī)號(hào)
         required:true,
         tel:true
       }
     }
     const messages = { //提示信息
       userName: {
         required: '請(qǐng)?zhí)顚?xiě)姓名',
         minlength:'請(qǐng)輸入正確的名稱(chēng)'
       },
       password: {
         required: '請(qǐng)?zhí)顚?xiě)密碼'
       },
       phone:{
         required:'請(qǐng)?zhí)顚?xiě)手機(jī)號(hào)',
         tel:'請(qǐng)?zhí)顚?xiě)正確的手機(jī)號(hào)'
       }
     }
     this.WxValidate = new WxValidate(rules, messages)
   },
   //調(diào)用驗(yàn)證函數(shù)
   formSubmit: function (e) {
     console.log('form發(fā)生了submit事件，攜帶的數(shù)據(jù)為：', e.detail.value)
     const params = e.detail.value
     //校驗(yàn)表單
     if (!this.WxValidate.checkForm(params)) {
       const error = this.WxValidate.errorList[0]
       console.log(error);
       return false
     }
     console.log("yes");
     return true;
},

值得注意的是： WxValidate的errorList列表返回的是一個(gè)對(duì)象。