微信小程式開發之表單驗證(WxValidate使用)
微信小程式的開發框架個人感覺大體上跟VUE是差不多的,但是他的表單元件沒有自帶的驗證功能,因此開發小程式的表單驗證時候一般有兩種方法,一是自己裸寫驗證規則,但是需要比較紮實的正則表示式基礎,一種是利用官方社群開發的WxValidate外掛進行表單驗證。
WxValidate外掛是參考 jQuery Validate 封裝的,為小程式表單提供了一套常用的驗證規則,包括手機號碼、電子郵件驗證等等,同時提供了新增自定義校驗方法,讓表單驗證變得更簡單。
具體的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()中要例項化物件,至此表單驗證就已經完成了
下面看看演示效果
大家還可以自行跑一下在上面下載的例項,裡面有更多表單驗證的效果