小程序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>