微信小程序開發之表單驗證WxValidate使用

Posted on by

微信小程序的開發框架個人感覺大體上跟VUE是差不多的，但是他的表單組件沒有自帶的驗證功能，因此開發小程序的表單驗證時候一般有兩種方法，一是自己裸寫驗證規則，但是需要比較紮實的正則表達式基礎，一種是利用官方社區開發的WxValidate插件進行表單驗證。

WxValidate插件是參考 jQuery Validate 封裝的，為小程序表單提供瞭一套常用的驗證規則，包括手機號碼、電子郵件驗證等等，同時提供瞭添加自定義校驗方法，讓表單驗證變得更簡單。

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

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

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

之後可以采用局部引用的方式將插件引入到你所需要的頁面的JS文件裡，具體操作如下

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

這裡需要註意的是文件路徑的寫法

/是從根目錄開始算起 ./是從引入文件的目錄文件開始，此例子中就是index.js所在目錄開始算起 ../就是從引入文件的父級目錄開始算起，此例子中index文件夾目錄，而../../就是從pages所在目錄開始算起，如果這個地方的文件路徑寫錯，編譯就會報錯

之後就是註意在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>
        <view class="weui-cell__bd">
          <input class="weui-input" name='name' value='{{form.name}}' placeholder="請輸入姓名" />
        </view>
      </view>
      <view class="weui-cell weui-cell_input weui-cell_vcode">
        <view class="weui-cell__hd">
          <view class="weui-label">手機號</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" name='phone' type='number' value='{{form.phone}}' placeholder="請輸入手機號" />
        </view>
        </view>
    </view>
</form>

主要的方法就是在需要驗證的input框內加入value值的綁定，其他的組件同理

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

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

然後就是最重要的驗證規則的書寫瞭

首先要在onLoad函數中加入驗證規則函數

// onLoad中有多個函數的寫法，onLoad函數內寫函數名，函數在onLoad外定義
onLoad() {
    this.getuser()
    this.initValidate()//驗證規則函數
  }
 
//onLoad中隻有一個函數的寫法
onLoad:function(){
    rules:{}
    messages:{}
    }

此處需要註意的是一定要在js文件中onLoad驗證規則，否則編譯會報checkform is not a function 

然後是驗證規則和報錯規則的代碼

//報錯 
showModal(error) {
    wx.showModal({
      content: error.msg,
      showCancel: false,
    })
  },
//驗證函數
initValidate() {
    const rules = {
      name: {
        required: true,
        minlength:2
      },
      phone:{
        required:true,
        tel:true
      }
    }
    const messages = {
      name: {
        required: '請填寫姓名',
        minlength:'請輸入正確的名稱'
      },
      phone:{
        required:'請填寫手機號',
        tel:'請填寫正確的手機號'
      }
    }
    this.WxValidate = new WxValidate(rules, messages)
  },
//調用驗證函數
 formSubmit: function(e) {
    console.log('form發生瞭submit事件，攜帶的數據為：', e.detail.value)
    const params = e.detail.value
    //校驗表單
    if (!this.WxValidate.checkForm(params)) {
      const error = this.WxValidate.errorList[0]
      this.showModal(error)
      return false
    }
    this.showModal({
      msg: '提交成功'
    })
  }

 這裡我隻寫瞭一點字段的驗證，官方文檔中還包含瞭很多字段的驗證規則，我就不一一寫出來瞭，這裡需要註意的是在initValidate（）中要實例化對象，至此表單驗證就已經完成瞭

 下面看看演示效果

演示效果

大傢還可以自行跑一下在上面下載的實例，裡面有更多表單驗證的效果

到此這篇關於微信小程序開發之表單驗證WxValidate使用的文章就介紹到這瞭,更多相關小程序表單驗證內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：