參考文章
（1）
Github地址：WxValidate
1. 拷貝至util目錄
2.項目引入
3.查看wxml匹配規則，通過name
4.在js配置規則
1 import WxValidate from '../../../utils/WxValidate';
2
3 Page({
4
5 /**
6 * 頁面的初始數據
7 */
8 data: {},
9
10 onLoad: function(options) {
11
12 /**
13 * 4-1(先初始化表單)
14 */
15 this.initValidate();
16 },
17
18
19
20 showModal(error) {
21 wx.showModal({
22 content: error.msg,
23 showCancel: false,
24 })
25 },
26
27
28 submitForm(e) {
29 /**
30 * 4-3(表單提交校驗)
31 */
32 const params = e.detail.value
33 if (!this.WxValidate.checkForm(params)) {
34 const error = this.WxValidate.errorList[0]
35 this.showModal(error)
36 return false
37 }
38 /**
39 * 這里添寫驗證成功以后的邏輯
40 *
41 */
42 //驗證通過以后->
43 this.submitInfo(params);
44 },
45
46 /**
47 * 表單-提交
48 */
49 submitInfo(params) {
50 // form提交
51 let form = params;
52 console.log('將要提交的表單信息：', form);
53
54 wx.showToast({
55 title: '提交成功！！！！',
56 })
57 },
58
59 /**
60 * 表單-驗證字段
61 */
62 initValidate() {
63
64 /**
65 * 4-2(配置規則)
66 */
67 const rules = {
68 name: {
69 required: true,
70 rangelength: [2, 4]
71 },
72 idcard: {
73 required: true,
74 idcard: true,
75 },
76 tel: {
77 required: true,
78 tel: true,
79 },
80 // 配置false可關閉驗證
81 regcode: {
82 required: false,
83 minlength: 6
84 },
85 assistance: {
86 required: true,
87 assistance: true,
88 },
89 }
90 // 驗證字段的提示信息，若不傳則調用默認的信息
91 const messages = {
92 name: {
93 required: '請輸入姓名',
94 rangelength: '請輸入2~4個漢字個漢字'
95 },
96 tel: {
97 required: '請輸入11位手機號碼',
98 tel: '請輸入正確的手機號碼',
99 },
100 idcard: {
101 required: '請輸入身份證號碼',
102 idcard: '請輸入正確的身份證號碼',
103 },
104 regcode: {
105 required: '請輸入驗證碼',
106 minlength: '請輸入正確的驗證碼'
107 },
108 assistance: {
109 required: '請勾選 《順風男服務協議》'
110 },
111 }
112 // 創建實例對象
113 this.WxValidate = new WxValidate(rules, messages)
114 /**
115 * 也可以自定義驗證規則
116 */
117 this.WxValidate.addMethod('assistance', (value, param) => {
118 return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2)
119 }, '請勾選 《順風男服務協議》')
120 }
121 });
5.wxml
1 <form bindsubmit='submitForm'> 2 <view class="container"> 3 <view class='container-info'> 4 <view class="man-form-info"> 5 <view class='name'>姓名 6 <input placeholder='請輸入姓名' name="name"></input> 7 </view> 8 <view class='idcard'> 9 身份證號碼 10 <input maxlength='18' placeholder='請輸入身份證號碼' type='idcard' name="idcard"></input> 11 </view> 12 13 <view class='phone'> 14 手機號碼 15 <input maxlength='11' placeholder='請輸入手機號碼' type='number' bindinput="phoneValue" name="tel"></input> 16 </view> 17 </view> 18 </view> 19 20 <view class='read-man-pact'> 21 <checkbox-group name="assistance"> 22 <checkbox></checkbox> 23 <navigator class='pact'>閱讀《順風男服務協議》</navigator> 24 </checkbox-group> 25 </view> 26 27 <view class='submit-form-info'> 28 <button form-type='submit'>提交</button> 29 </view> 30 31 </view> 32 </form>
wxss
1 page {
2 font-size: 30rpx;
3 }
4
5 input:hover {
6 border-bottom: 2px solid #ddd;
7 }
8
9 button:active {
10 opacity: 0.7;
11 }
12
13 .container-info {
14 padding: 5%;
15 }
16
17 .man-form-info {
18 display: flex;
19 flex-wrap: wrap;
20 justify-content: center;
21 }
22
23 .man-form-info .name, .man-form-info .idcard, .man-form-info .phone,
24 .man-form-info .regcode {
25 display: flex;
26 width: 100%;
27 flex-wrap: wrap;
28 margin-top: 2%;
29 }
30
31 .man-form-info input {
32 width: 100%;
33 border-bottom: 1px solid #ddd;
34 }
35
36 .regcode {
37 position: relative;
38 }
39
40 .regcode button {
41 border-radius: 10rpx;
42 background-color: #3879d9;
43 color: #fff;
44 height: 54rpx;
45 line-height: 54rpx;
46 font-size: 23rpx;
47 width: 300rpx;
48 margin-top: -2%;
49 }
50
51 .regcode input {
52 width: 100%;
53 }
54
55 .code {
56 position: relative;
57 width: 100%;
58 }
59
60 .code button {
61 position: absolute;
62 top: 72rpx;
63 right: 0;
64 }
65
66 .self-idcard-info {
67 margin-top: 15%;
68 display: flex;
69 flex-wrap: wrap;
70 justify-content: center;
71 width: 100%;
72 border: 1px dashed #ddd;
73 padding: 2%;
74 }
75
76 .f-center {
77 width: 100%;
78 display: flex;
79 justify-content: center;
80 }
81
82 .picture_list {
83 padding: 0 7%;
84 }
85
86 .add-image {
87 background-color: #ddd;
88 color: #fff;
89 }
90
91 .upload_progress {
92 width: 167rpx;
93 height: 164rpx;
94 }
95
96 .apply {
97 width: 96%;
98 display: flex;
99 justify-content: space-between;
100 align-items: center;
101 padding: 2%;
102 border-top: 2px solid #ddd;
103 border-bottom: 2px solid #ddd;
104 }
105
106 .apply-deposit {
107 font-weight: bold;
108 }
109
110 .apply-deposit-amount {
111 font-weight: bold;
112 color: #fdd20c;
113 }
114
115 .apply button {
116 margin: 0;
117 padding: 0;
118 width: 240rpx;
119 height: 60rpx;
120 line-height: 60rpx;
121 color: #fff;
122 background-color: #fdd20c;
123 }
124
125 .read-man-pact {
126 display: flex;
127 justify-content: center;
128 padding: 2%;
129 }
130
131 .read-man-pact checkbox-group {
132 display: flex;
133 align-items: center;
134 }
135
136 .pact {
137 border-bottom: 1px solid #ddd;
138 }
139
140 .submit-form-info {
141 display: flex;
142 justify-content: center;
143 }
144
145 .submit-form-info button {
146 background-color: #fdd000;
147 width: 80%;
148 margin: 3% 0;
149 }
效果圖（拷貝上面的代碼即可運行）
（2）
微信小程序的開發框架個人感覺大體上跟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（）中要實例化對象，至此表單驗證就已經完成了
下面看看演示效果
（3）
WxValidate插件是參考 jQuery Validate 封裝的，為小程序表單提供了一套常用的驗證規則，包括手機號碼、電子郵件驗證等等，同時提供了添加自定義校驗方法，讓表單驗證變得更簡單。
首先插件的下載地址和官方文檔：https://github.com/skyvow/wx-extend
具體的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js
1、引入方法：將插件文件拷貝到你所需要的文件目錄下
2、采用局部引用的方式將插件引入到你所需要的頁面的JS文件里，具體操作如下
import WxValidate from '../../utils/WxValidate.js'
3、在wxml文件中對表單組件的數據綁定，否則無論表單組件如何填寫，都無法驗證規則。表單組件的綁定方法如下
<view class="issue_item">
<input focus name="title" value="{{title}}" placeholder='請輸入問題描述' />
</view>
主要的方法就是在需要驗證的input框內加入value值的綁定，其他的組件同理
4、驗證規則的書寫。
在onLoad函數中加入驗證規則函數，即驗證規則和報錯規則的代碼
onLoad: function () {
// 初始化驗證方法
this.initValidate()
},
//報錯
showModal(error) {
wx.showModal({
content: error.msg,
showCancel: false,
})
},
//驗證函數
initValidate() {
const rules = {
title: {
required: true,
maxlength: 128
},
dbType: {
required: true
},
priority: {
required: true
},
description: {
required: true
}
}
const messages = {
title: {
required: '請輸入問題描述',
minlength: '最多只能輸入128個字符'
},
dbType: {
required: '請選擇問題類型'
},
priority: {
required: '請選擇問題等級'
},
description: {
required: '請輸入問題詳情'
}
}
this.WxValidate = new WxValidate(rules, messages)
},
5、調用校驗規則
submitIssue (e){
let issueInfo = e.detail.value
//校驗表單
if (!this.WxValidate.checkForm(issueInfo)) {
const error = this.WxValidate.errorList[0]
this.showModal(error)
return false
}
wx.showLoading({
title: '玩命加載中',
mask: true
})
.