微信小程式最難實現的公共業務是什麼？應該是表單校驗，這篇文章主要介紹了微信小程式如何實現表單校驗功能，具有一定的參考價值，有興趣的小夥伴們可以參考一下
小程式SDK版本1.4
表單校驗之難
如果要問微信小程式最難實現的公共業務是什麼？應該是表單校驗，沒有之一。原因如下：
表單元件在數量上達到11個，居各類別元件之首。當然幸運的是，並不是所有的都需要校驗。
而這些元件操作方式多樣，可分為滑動、（多行）輸入、點擊、點擊+滑動。
即使是同一個元件，因為業務場景不同就會有不同的校驗規則。
更麻煩的是，這些元件之間經常還會連動或關聯校驗。
…
但是，作為一個非簡單靜態頁面，有著較多使用者互動的小程序，表單校驗又是一個非常常用的功能：登入、註冊、新增、編輯…
總而言之：表單元件的多樣性X 校驗規則的多樣性= 複雜的公共業務
這麼棘手的問題我們怎麼來解決它呢？
嘗試元件化
如果你專注於近年前端發展趨勢，一定會想到「元件化」來實現：
#把每個表單元件的視圖、樣式、校驗邏輯封裝成單獨的業務元件，然後直接呼叫。
可事情似乎沒這麼簡單。
如果考慮把n個原生組件抽像出來，配上n個校驗規則，再乘以組件之間的關係n（的全排列），複雜度至少達到n³。
而且每個元件的校驗失敗或成功都要通知父元件，以便顯示錯誤訊息或進行下一步操作。
這樣不但沒有解決問題，反而使得這些公用的表單元件過於複雜，耦合混亂。
嘗試非元件化
既然原來的想法行不通，再來回到出發點，看看我們最核心的需要被抽像出來的是什麼。
無非是兩樣東西：視圖層的元素樣式和邏輯層的校驗規則。
上面說到封裝原生表單元件會極大的增加複雜度，索性放棄它，複雜度瞬間可以下降到n²。
但同時我們又要保持樣式統一，也就是我們常說的風格一致。
例如輸入框該有多高，錯誤提示怎麼顯示，字體大小顏色…之類的。
這個好辦，我們把樣式類別寫入一個公共樣式檔案form.wxss，然後需要的時候引入，甚至可以全域引入。
// 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 {
box-sizing: border-box;
background-color: #efefef;
color: #838383;
font-size: 28rpx;
padding: 31rpx;
min-height: 90rpx;
}
...我們使用的時候只需要在對應的元素上加入對應的樣式。例如：
// xxx.wxml <form class="form"> <view class="form-title">请输入手机号</view> <view class="form-line"> <label class="label">手机</label> <view class="form-control"> <input class="f-1 va-m input" /> </view> </view> ... </form>
那麼接下來我們只剩下校驗規則和元件關聯關係之間這兩個難題了。
校驗規則理想的狀態是可擴充和可設定。
可擴充。隨著業務的成長，在不修改已有規則情況可以新增校驗規則。
可設定。可單獨為每個表單元件配置不同的單一或多個校驗規則。
如何做到可定義？用統一的形式即可。例如：
/*
统一的格式：
[规则名]: {
rule: [校验方式]
msg: [错误信息]
}
*/
const validators = {
// 简单的校验用正则
required: {
rule: /.+/,
msg: '必填项不能为空'
},
// 复杂的校验用函数
same: {
rule (val='', sVal='') {
return val===this.data[sVal]
},
msg: '密码不一致'
}
...
}如何做到可設定？配置上支援類似數組的形式，然後用統一的函數依序讀取這些校驗規則，逐一校驗。
配置的規則肯定是在原生表單元件上，至於元件的值也只能透過事件物件取得。
如果直接綁定事件進行校驗會阻礙父頁面取得值，所以最好由父頁面綁定事件傳值，並且傳入事件物件和執行環境進行處理：
/*
校验函数部分代码
e 事件对象
context 页面对象函数执行的上下文环境
*/
let validate = (e, context) => {
// 从事件对象中获取组件的值
let value = (e.detail.value || '').trim()
// 从事件中获取校验规则名称
let validator = e.currentTarget.dataset.validator ? e.currentTarget.dataset.validator .split(',') : []
// 遍历规则进行校验
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
}
}
...
}
呼叫起來也非常簡單，依照固定的格式加上對應的樣式，配置校驗規則，然後呼叫校驗函數。
// 部分代码示例
// page.wxml
<form>
<!-- 一个表单组件 -->
<view class="form-line">
<label class="label">授权手机</label>
<view class="form-control">
<!-- 校验规则：必须填写，且为电话号码 -->
<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}}" />
<!-- 错误图标 -->
<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)
}總結
以上是微信小程式表單校驗功能實現的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
