建立通用的表單校驗邏輯庫

表單校驗一直是web開發中最基礎，也是最不好做的一個環節。相信很多初學web開發的人，第一課就是學習如果基于js、jQuery實作表單驗證工作，在10年前，甚至是5年前，JavaScript還是被多數工程師輕視的一門語言，那時候很多人認為JavaScript的出現充其量也就為了完成web頁面上的表單校驗的工作。由此可知表單校驗的确是web開發中相當基礎的一項工作。說它不好做，是因為一些項目中表單校驗往往工作量極大，一個字段要校驗的項目非常多，例如非空、字元串長度限制等等，正常來說任何一個字段都需要進行校驗，比如資料庫每個字段的長度是有限的，是以最起碼要校驗一下字段的長度吧。是以，表單校驗就是一項沒太大技術含量，但是又非常耗費體力的工作，尤其在一些對互動友好性、使用者體驗要求較高的項目中，表單校驗的開發就變得更繁瑣與枯燥。

于是我們往往依賴于一些現成的表單校驗架構，如：jquery-validation、validation-engine、easyui-validatebox等。

分析以上js庫，可以發現他們有個共同的特點，就是采用政策模式，将不同的表單校驗規則封裝成政策類，提高校驗邏輯的複用性；同時提供“規則字元串”的形式，讓使用者通過一個簡單的字元串來建立規則政策類的執行個體，來對表單的輸入項進行校驗，校驗的結果就是一個标志位加一個錯誤提示語句。這樣的設計使得表單校驗由一個體力活變成了一個配置項，大大降低了表單校驗相關的代碼量。

但是的以上控件都是按照這個邏輯實作的表單校驗，但是他們立足點卻是在表單的提示，與web頁面結合過于緊密，其邏輯部分無法單獨使用。而他們大多都是基于jQuery，現在很多web項目都不再依賴于jQuery；同時他們的提示方式也未必是我們想要的，對于如今的web項目而言，做将錯誤提示封裝成元件是一件很容易的事情，真正需要的反而是表單校驗的邏輯部分。

是以基于以上控件的表單驗證特點，筆者開發了一個表單校驗庫，更準确說是表單校驗邏輯庫——my-validation，這個庫僅提供表單校驗的邏輯，使用簡單的api可将複雜的表單驗證過程變得隻需要配置一下就能完成，便于校驗的邏輯複用，并傳回帶有提示語句的錯誤結果清單，友善嵌入到任何架構中，完成表單校驗的邏輯部分。

安裝方法:

webpack中使用:

npm install git://github.com/laden666666/my-validation --save      

然後直接用reqiure引用即可

var myValidation = require("my-validation");      

如果是浏覽器環境直接script标簽引用my-validation.js或者my-validation.min.js檔案即可。 

使用方法:

1.根據規則字元串校驗：

共提供兩個兩個重載api：

myValidation.validation(ruleStringString, valueString)      

參數	參數描述
ruleStringString	規則的字元串
valueString	要校驗的字元串

MyValidation.validation(ruleStringJson, values, isStringPath)       

ruleStringJson	規則的字元串的集合
values	要校驗的字元串的集合
isStringPath	啟用子對象key的路徑的做key的模式，校驗路徑對應子對象的屬性

這裡解釋一下規則的字元串，它是校驗的核心，格式是

規則1名[參數1,參數2…];規則2名[參數1,參數2…]…      

如：“required;minSize[5]”表示使用required規則校驗，校驗非空；然後再使用minSize規則校驗，參數是5，表示字元串長度不能小于5 

規則的字元串中特殊字元有“;”、“,”兩個，需要轉義，轉義字元分别為“;;”、“;,”。

使用的時候可以直接校驗一個字元串，如:

var result = myValidation.validation("required;sizeMax[16]", "test");       

也可以根據一json，完成對一個對象的校驗，并且支援微信小程式那種使用過子對象key的路徑的key的功能，如：

var result = myValidation.validation({
    "user.name" : "required;sizeMax[16]",
},{
     user : {
          name : "test"
     }
},true)       

myValidation.validation傳回的結果是校驗規則結果的數組。 

2.注冊自定義規則：

校驗規則相當于一個政策模式的實作，如果不能自定義規則，這個校驗系統就相當于斷了翅膀的鳥，沒有任何自由度可言。是以能夠提供動态擴充規則的api是非常重要的，擴充的api如下：

myValidation.registerRule(name, validationFn, msg)      

name	規則的名稱
validationFn	校驗函數
msg	預設的錯誤提示語句,支援字元串或函數

校驗結果有兩個：boolean型校驗結果和一個字元串型的錯誤提示語

這個錯誤提示語句可以動态生成，也可以指定為通用的形式，如:

myValidation.registerRule("minSize", function (value, object, count) {
    return !!value && value.length >= parseInt(count);
},function (value, object, count) {
    return "最少輸入" + count + "個字元數";
});      

指定預設錯誤提示的例子：

myValidation.registerRule("integer", function (value, object) {
    return !!value && /^[-+]?\d+$/.test(value);
}, "必須是整數");      

boolean型校驗結果的生成就要用到校驗函數validationFn。校驗函數是表單校驗的核心，通過上面的兩個例子我們能夠校驗函數的定義方式，他的具體參數如下： 

value	要校驗的值
object	校驗的對象，包括校驗字元串，和使用者其他自定義屬性
params	校驗字元串的參數清單，是rest參數。如xx[a,b,c]，這裡會解析出3個參數，分别為：“a”、“b”、“c”

需要注意的是，校驗失敗的情況下必須傳回fals或者是調用myValidation.result生成的傳回結果，否則視為校驗成功。

3.自定義傳回錯誤提示：

有時候需要在驗證的時候動态的生成傳回錯誤，而不是傳回預設錯誤，此時可以使用以下api：

myValidation.result (result, msg)      

result	boolean型，校驗的結果，僅當false時候表示驗證失敗
	驗證失敗的字元串，提示這個字元串的優先級比預設字元串高

如：

myValidation.registerRule("returnMsg", function () {
    return myValidation.result(false, "自定義錯誤提示");
}, "此為預設提示，會被覆寫掉");      

上面規則的錯誤傳回提示語會是校驗時候生成的“自定義錯誤提示”這句話，而不是注冊時候設定的預設的提示語。

4.分析驗證結果:

驗證結果是個錯誤資訊的數組,或者是一個key、value形式的json,但是表單驗證的結果究竟是成功還是失敗,我們無法馬上得知。你可以通過周遊各個驗證項的result字段,不斷一個個相與來獲得結果的boolean值,也可以直接使用我們的api函數：

myValidation.analyseResult (result)      

	validation的驗證結果

var result = myValidation.validation({
    "user.name" : "required;sizeMax[16]",
},{
     user : {
          name : "test"
     }
},true);

result = myValidation.analyseResult(result) //result被轉為boolean型      

預設校驗庫:

		例子
required	必填
minSize	要求字元串長度不大于指定值	minSize[5]
maxSize	要求字元串長度不小于指定值	maxSize[5]
min	必須是數字，并要求不小于指定值	min[5]
max	必須是數字，并要求不大于指定值	max[5]
number	必須是數字
integer	必須是整數
regex	正則表單式	regex[^\\S{2,4}$,i]

目前僅提供幾個筆者馬上要使用的規則，其他規則大家可以自己通過myValidation.registerRule注冊。