微信小程序之表單校驗(yàn)
小程序SDK版本 1.4
表單校驗(yàn)之難
如果要問(wèn)微信小程序最難實(shí)現(xiàn)的公共業(yè)務(wù)是什么？應(yīng)該是表單校驗(yàn)，沒(méi)有之一。原因如下：
表單組件在數(shù)量上達(dá)到11個(gè)，居各類(lèi)組件之首。當(dāng)然幸運(yùn)的是，并不是所有的都需要校驗(yàn)。
而這些組件操作方式多樣，可分為滑動(dòng)、（多行）輸入、點(diǎn)擊、點(diǎn)擊+滑動(dòng)。
即使是同一個(gè)組件，因?yàn)闃I(yè)務(wù)場(chǎng)景不同就會(huì)有不同的校驗(yàn)規(guī)則。
更麻煩的是，這些組件之間經(jīng)常還會(huì)聯(lián)動(dòng)或者關(guān)聯(lián)校驗(yàn)。
…
但是，作為一個(gè)非簡(jiǎn)單靜態(tài)頁(yè)面，有著較多用戶(hù)交互的小程序，表單校驗(yàn)又是一個(gè)非常常用的功能：登錄、注冊(cè)、新增、編輯…
總而言之：表單組件的多樣性 X 校驗(yàn)規(guī)則的多樣性 = 復(fù)雜的公共業(yè)務(wù)
這么棘手的問(wèn)題我們?cè)趺磥?lái)解決它呢？
嘗試組件化
如果你關(guān)注近年前端發(fā)展趨勢(shì)，一定會(huì)想到“組件化”來(lái)實(shí)現(xiàn)：
把每個(gè)表單組件的視圖、樣式、校驗(yàn)邏輯封裝成單獨(dú)的業(yè)務(wù)組件，然后直接調(diào)用。
可事情似乎沒(méi)這么簡(jiǎn)單。
如果考慮把n個(gè)原生組件抽象出來(lái)，配上n個(gè)校驗(yàn)規(guī)則，再乘以組件之間的關(guān)系n（的全排列），復(fù)雜度至少達(dá)到n³。
而且每個(gè)組件的校驗(yàn)失敗或成功都要通知父組件，以便顯示錯(cuò)誤信息或者進(jìn)行下一步操作。
這樣不但沒(méi)有解決問(wèn)題，反而使得這些公用的表單組件過(guò)于復(fù)雜，耦合混亂。
嘗試非組件化
既然原先的思路行不通，再來(lái)回到出發(fā)點(diǎn)，看看我們最核心的需要被抽象出來(lái)的是什么。
無(wú)非是兩樣?xùn)|西：視圖層的元素樣式和邏輯層的校驗(yàn)規(guī)則。
上面說(shuō)到封裝原生表單組件會(huì)極大的增加復(fù)雜度，索性放棄它，復(fù)雜度瞬間可以下降到n²。
但同時(shí)我們又要保持樣式統(tǒng)一，也就是我們常說(shuō)的風(fēng)格一致。
比如輸入框該多高，錯(cuò)誤提示怎么顯示，字體大小顏色…之類(lèi)的。
這個(gè)好辦，我們把樣式類(lèi)寫(xiě)入一個(gè)公共樣式文件form.wxss，然后需要的時(shí)候引入，甚至可以全局引入。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
// form.wxss
.form {
display: block;
font-size: 28rpx;
position: relative;
}
.form-line {
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
font-size: 34rpx;
height: 96rpx;
line-height: 96rpx;
display: flex;
padding: 0 31rpx;
}
.form-title {
background-color: #efefef;
color: #838383;
font-size: 28rpx;
padding: 31rpx;
min-height: 90rpx;
}
...
|
我們使用的時(shí)候只需要在對(duì)應(yīng)的元素上添加相應(yīng)的樣式即可。比如：
|
1
2
3
4
5
6
7
8
9
10
11
|
// xxx.wxml
<form class="form">
<view class="form-title">請(qǐng)輸入手機(jī)號(hào)</view>
<view class="form-line">
<label class="label">手機(jī)</label>
<view class="form-control">
<input class="f-1 va-m input" />
</view>
</view>
...
</form>
|
那么接下來(lái)我們只剩下校驗(yàn)規(guī)則和組件關(guān)聯(lián)關(guān)系之間這兩個(gè)難題了。
校驗(yàn)規(guī)則理想的狀態(tài)是可擴(kuò)展和可配置。
可擴(kuò)展。隨著業(yè)務(wù)的增長(zhǎng)，在不修改已有規(guī)則情況可以新增校驗(yàn)規(guī)則。
可配置?？蓡为?dú)為每個(gè)表單組件配置不同的單個(gè)或多個(gè)校驗(yàn)規(guī)則。
如何做到可定義？用統(tǒng)一的形式即可。比如：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/*
統(tǒng)一的格式：
[規(guī)則名]: {
rule: [校驗(yàn)方式]
msg: [錯(cuò)誤信息]
}
*/
const validators = {
// 簡(jiǎn)單的校驗(yàn)用正則
required: {
rule: /.+/,
msg: '必填項(xiàng)不能為空'
},
// 復(fù)雜的校驗(yàn)用函數(shù)
same: {
rule (val='', sVal='') {
return val===this.data[sVal]
},
msg: '密碼不一致'
}
...
}
|
如何做到可配置？配置上支持類(lèi)似數(shù)組的形式，然后用統(tǒng)一的函數(shù)依次讀取這些校驗(yàn)規(guī)則，逐個(gè)校驗(yàn)。
配置的規(guī)則肯定是在原生表單組件上，至于組件的值也只能通過(guò)事件對(duì)象獲取。
如果直接綁定事件進(jìn)行校驗(yàn)會(huì)阻礙父頁(yè)面獲取值，所以最好由父頁(yè)面綁定事件傳值，并且傳入事件對(duì)象和執(zhí)行環(huán)境進(jìn)行處理：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/*
校驗(yàn)函數(shù)部分代碼
e 事件對(duì)象
context 頁(yè)面對(duì)象函數(shù)執(zhí)行的上下文環(huán)境
*/
let validate = (e, context) => {
// 從事件對(duì)象中獲取組件的值
let value = (e.detail.value || '').trim()
// 從事件中獲取校驗(yàn)規(guī)則名稱(chēng)
let validator = e.currentTarget.dataset.validator ? e.currentTarget.dataset.validator .split(',') : []
// 遍歷規(guī)則進(jìn)行校驗(yàn)
for (let i = 0; i < validator.length; i++) {
let ruleName = validator[i].split('=')[0]
let ruleValue = validator[i].split('=')[1]
let rule = validators[ruleName].rule || /.*/
if ('function' === typeof rule) {
rule.call(context, value, ruleValue) ? '' : validators[ruleName].msg
} else {
rule.test(value) ? '' : validators[ruleName].msg
}
}
...
}
|
調(diào)用起來(lái)也非常簡(jiǎn)單，按照固定的格式加上對(duì)應(yīng)的樣式，配置校驗(yàn)規(guī)則，然后調(diào)用校驗(yàn)函數(shù)。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 部分代碼示例
// page.wxml
<form>
<!-- 一個(gè)表單組件 -->
<view class="form-line">
<label class="label">授權(quán)手機(jī)</label>
<view class="form-control">
<!-- 校驗(yàn)規(guī)則：必須填寫(xiě)，且為電話(huà)號(hào)碼 -->
<input maxlength="11" class="f-1 va-m input" bindblur="validate" type="number" data-name="phone" data-validator="required,phone" confirm-type="next" value="{{phone}}" />
<!-- 錯(cuò)誤圖標(biāo) -->
<icon wx:if="{{form.phone!==undefined}}" type="{{form.phone?'warn':'success'}}" size="16" />
</view>
</view>
...
</form>
// page.js
valid(e) {
this.setData({
[e.currentTarget.dataset.name]: e.detail.value
})
validate(e, this)
}
|
上面的代碼中省略了校驗(yàn)錯(cuò)誤提示和非空校驗(yàn)。詳細(xì)代碼請(qǐng)查看GitHub倉(cāng)庫(kù)：
https://github.com/yalishizhude/miniprogram-seed.git
總結(jié)
寫(xiě)代碼最然總是要抱著最美好的想法，但同時(shí)也要做著最壞的打算。尤其是面對(duì)一些底層框架限制的時(shí)候。
面對(duì)這種情況，我們要從核心需求出發(fā)，把能抽出公用的東西都出來(lái)，同時(shí)保證可配置、可擴(kuò)展。
好的的架構(gòu)師不但喜歡未開(kāi)墾的處女地，也應(yīng)不懼布滿(mǎn)雜石亂草的荒野~
