快捷導(dǎo)航

微信小程序開(kāi)發(fā)之表單驗(yàn)證WxValidate使用

更新時(shí)間：2021年10月22日 11:48:40 作者：酒香飄在巷子里

本文主要介紹了微信小程序開(kāi)發(fā)之表單驗(yàn)證WxValidate使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

微信小程序的開(kāi)發(fā)框架個(gè)人感覺(jué)大體上跟VUE是差不多的，但是他的表單組件沒(méi)有自帶的驗(yàn)證功能，因此開(kāi)發(fā)小程序的表單驗(yàn)證時(shí)候一般有兩種方法，一是自己裸寫(xiě)驗(yàn)證規(guī)則，但是需要比較扎實(shí)的正則表達(dá)式基礎(chǔ)，一種是利用官方社區(qū)開(kāi)發(fā)的WxValidate插件進(jìn)行表單驗(yàn)證。

WxValidate插件是參考 jQuery Validate 封裝的，為小程序表單提供了一套常用的驗(yàn)證規(guī)則，包括手機(jī)號(hào)碼、電子郵件驗(yàn)證等等，同時(shí)提供了添加自定義校驗(yàn)方法，讓表單驗(yàn)證變得更簡(jiǎn)單。

首先插件的下載地址和官方文檔都在WxValidate下載地址和文檔地址

具體的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js

首先引入的方法就是將插件文件拷貝到你所需要的文件目錄下

之后可以采用局部引用的方式將插件引入到你所需要的頁(yè)面的JS文件里，具體操作如下

//index.js頁(yè)面下
import WxValidate from '../../utils/WxValidate.js'
const app = getApp()
Page({
  data: {
    form: {
      name: '',
      phone: ''
    }
  }
})

這里需要注意的是文件路徑的寫(xiě)法

/是從根目錄開(kāi)始算起 ./是從引入文件的目錄文件開(kāi)始，此例子中就是index.js所在目錄開(kāi)始算起 ../就是從引入文件的父級(jí)目錄開(kāi)始算起，此例子中index文件夾目錄，而../../就是從pages所在目錄開(kāi)始算起，如果這個(gè)地方的文件路徑寫(xiě)錯(cuò)，編譯就會(huì)報(bào)錯(cuò)

之后就是注意在wxml文件中對(duì)表單組件的數(shù)據(jù)綁定，否則無(wú)論表單組件如何填寫(xiě)，都無(wú)法驗(yàn)證規(guī)則。

表單組件的綁定方法如下

//wxml頁(yè)面下
<form bindsubmit="formSubmit">
    <view class="weui-cells__title">請(qǐng)?zhí)顚?xiě)個(gè)人信息</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>
        <view class="weui-cell__bd">
          <input class="weui-input" name='name' value='{{form.name}}' placeholder="請(qǐng)輸入姓名" />
        </view>
      </view>
      <view class="weui-cell weui-cell_input weui-cell_vcode">
        <view class="weui-cell__hd">
          <view class="weui-label">手機(jī)號(hào)</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" name='phone' type='number' value='{{form.phone}}' placeholder="請(qǐng)輸入手機(jī)號(hào)" />
        </view>
        </view>
    </view>
</form>

主要的方法就是在需要驗(yàn)證的input框內(nèi)加入value值的綁定，其他的組件同理

然后在js文件中加入form表單的綁定

//index.js
Page({
  data: {
    form: {
      name: '',
      phone: ''
    }
  }
})

然后就是最重要的驗(yàn)證規(guī)則的書(shū)寫(xiě)了

首先要在onLoad函數(shù)中加入驗(yàn)證規(guī)則函數(shù)

// onLoad中有多個(gè)函數(shù)的寫(xiě)法，onLoad函數(shù)內(nèi)寫(xiě)函數(shù)名，函數(shù)在onLoad外定義
onLoad() {
    this.getuser()
    this.initValidate()//驗(yàn)證規(guī)則函數(shù)
  }
 
//onLoad中只有一個(gè)函數(shù)的寫(xiě)法
onLoad:function(){
    rules:{}
    messages:{}
    }

此處需要注意的是一定要在js文件中onLoad驗(yàn)證規(guī)則，否則編譯會(huì)報(bào)checkform is not a function

然后是驗(yàn)證規(guī)則和報(bào)錯(cuò)規(guī)則的代碼

//報(bào)錯(cuò) 
showModal(error) {
    wx.showModal({
      content: error.msg,
      showCancel: false,
    })
  },
//驗(yàn)證函數(shù)
initValidate() {
    const rules = {
      name: {
        required: true,
        minlength:2
      },
      phone:{
        required:true,
        tel:true
      }
    }
    const messages = {
      name: {
        required: '請(qǐng)?zhí)顚?xiě)姓名',
        minlength:'請(qǐng)輸入正確的名稱(chēng)'
      },
      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]
      this.showModal(error)
      return false
    }
    this.showModal({
      msg: '提交成功'
    })
  }