無論是在寫什么彭雾，只要我們遇到了form表單沪铭，我們都需要在data里面聲明一個form對象，將表單中需要的字段放在form字段里面峦朗，到時候校驗的時候，就可以直接校驗整個form表單（...this.data.form）排龄。
微信小程序開發(fā)之表單驗證（WxValidate使用）
utils/wxValidate.js(這是封裝好的表單校驗)
WxValidate插件是參考 jQuery Validate 封裝的波势，為小程序表單提供了一套常用的驗證規(guī)則，包括手機號碼、電子郵件驗證等等尺铣，同時提供了添加自定義校驗方法拴曲，讓表單驗證變得更簡單。
首先插件的下載地址和官方文檔都在WxValidate下載地址和文檔地址（這個鏈接可以查看原文進行獲攘莘蕖）
具體的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js
-
首先引入的方法就是將插件文件拷貝到你所需要的文件目錄下
image.png - 之后可以采用局部引用的方式將插件引入到你所需要的頁面的JS文件里澈灼，具體操作如下：
//index.js頁面下
import WxValidate from '../../utils/WxValidate.js'
const app = getApp()
Page({
data: {
form: {
name: '',
phone: ''
}
}
})
這里需要注意的是文件路徑的寫法
/是從根目錄開始算起 ./是從引入文件的目錄文件開始，此例子中就是index.js所在目錄開始算起 ../就是從引入文件的父級目錄開始算起店溢，此例子中index文件夾目錄叁熔，而../../就是從pages所在目錄開始算起，如果這個地方的文件路徑寫錯床牧，編譯就會報錯
- 之后就是注意在wxml文件中對表單組件的數(shù)據(jù)綁定荣回，否則無論表單組件如何填寫，都無法驗證規(guī)則戈咳。
表單組件的綁定方法如下：
//wxml頁面下
<form bindsubmit="formSubmit">
<view class="weui-cells__title">請?zhí)顚憘€人信息</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框內(nèi)加入value值的綁定心软，其他的組件同理
- 然后在js文件中加入form表單的綁定
//index.js
Page({
data: {
form: {
name: '',
phone: ''
}
}
})
- 然后就是最重要的驗證規(guī)則的書寫了
首先要在onLoad函數(shù)中加入驗證規(guī)則函數(shù)
// onLoad中有多個函數(shù)的寫法，onLoad函數(shù)內(nèi)寫函數(shù)名著蛙，函數(shù)在onLoad外定義
onLoad() {
this.getuser()
this.initValidate()//驗證規(guī)則函數(shù)
}
//onLoad中只有一個函數(shù)的寫法
onLoad:function(){
rules:{}
messages:{}
}
此處需要注意的是一定要在js文件中onLoad驗證規(guī)則糯累，否則編譯會報checkform is not a function
- 然后是驗證規(guī)則和報錯規(guī)則的代碼
//報錯
showModal(error) {
wx.showModal({
content: error.msg,
showCancel: false,
})
},
//驗證函數(shù)
initValidate() {
const rules = {
name: {
required: true,
minlength:2
},
phone:{
required:true,
tel:true
}
}
const messages = {
name: {
required: '請?zhí)顚懶彰?,
minlength:'請輸入正確的名稱'
},
phone:{
required:'請?zhí)顚懯謾C號',
tel:'請?zhí)顚懻_的手機號'
}
}
this.WxValidate = new WxValidate(rules, messages)
},
//調(diào)用驗證函數(shù)
formSubmit: function(e) {
console.log('form發(fā)生了submit事件，攜帶的數(shù)據(jù)為：', 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: '提交成功'
})
}
具體可以查看原文鏈接：https://blog.csdn.net/weixin_41041379/article/details/82017301
附上鏈接（用于講解data-*的用法）
https://www.cnblogs.com/straybirds/p/12465685.html
picker選擇器（附上鏈接 http://caibaojian.com/weixinapp/d9mw1q95.html）
微信小程序表單組件册踩，從底部彈起的滾動選擇器泳姐，可以通過mode來區(qū)分，分別是普通選擇器（mode=selector）暂吉、多列選擇器（mode = multiSelector）胖秒、時間選擇器（mode=time）、日期選擇器（mode=date）慕的、省市區(qū)選擇器（mode = region）
