1.1 為什么要單獨寫一個js驗證模塊？

對于傳統的表單驗證或者一些其他的驗證場景，我們只能老老實實的以一個一個撰寫對應的檢測邏輯代碼去檢測一些資料是否符合規則，聰明的老哥們可能會把所有有關驗證的方法或者函式都抽離到一個js檔案中，但是，在每個需要驗證的驗證邏輯的js檔案中我們還是需要把所有用到的檢測方法匯入進來，然后一遍又一遍的重寫驗證邏輯和驗證流程…，這個程序不可謂不繁瑣和無趣，
這個時候把所有驗證邏輯和流程全部封裝到一個模塊中，我們只需要關注驗證的結果而不需要關心驗證程序從而達到關注點分離和代碼的復用性，當然市面上也有很多UI框架提供了驗證物件，但是畢竟和框架耦合在一起要是換一個框架怎么辦？這個時候單獨的一個驗證模塊的優勢、便利性和必要性就展現出來了，

1.2 設計靈感

該驗證模塊在使用方式設計的時候借鑒了ThinkPHP的驗證模塊的內置規則規范和vue指令的結構，

1.3 github下載地址:checker

1.4 使用方式：

這里你大可不比關注一些語法細節，只需要關注使用的大概流程就行，具體語法細節那些在后面會做詳細介紹，

1.4.1 通過<script>標簽本地或者網路引入

<script src="xxx/checker.js"></script>
<script>
	 //要檢測的資料物件
	 	const data = {
        name: 'mike',
        age: 18,
        hobby: '睡覺'
    }
	//rules一個包含一系列規則的陣列
    const rules = [{
        name: 'name',//name對應data當中的欄位名
        rule: 'alphaDash|require|max:8' //rule對應的規則
    }, {
        name: 'age',
        rule: 'between:10,20|require',
    } {
        name: 'hobby',
        rule: 'in:吃飯,睡覺'
    }];

    const res = checker(data, rules);//回傳一個檢測資源物件
    if (!res.result) { //檢測資源物件中有一個result屬性表示檢測的結構
        console.error(res.errMsg) //檢測資源物件中有一個errMsg屬性表示發生錯誤的原因
    } else {
        console.log('驗證通過');
    }
</script>

1.4.2 使用ES6 Module匯入

	import checker from 'xxx/checker.js';
	//要檢測的資料物件
	const data = {
        name: 'mike',
        age: 18,
        hobby: '睡覺'
    }
	//rules一個包含一系列規則的陣列
    const rules = [{
        name: 'name',//name對應data當中的欄位名
        rule: 'alphaDash|require|max:8' //rule對應的規則
    }, {
        name: 'age',
        rule: 'between:10,20|require',
    }, {
        name: 'hobby',
        rule: 'in:吃飯,睡覺'
    }];

    const res = checker(data, rules);//回傳一個檢測資源物件
    if (!res.result) { //檢測資源物件中有一個result屬性表示檢測的結構
        console.error(res.errMsg) //檢測資源物件中有一個errMsg屬性表示發生錯誤的原因
    } else {
        console.log('驗證通過');
    }

2.1 使用語法：

checker(data,rules,callback,returnType);

引數：

data
- Object 、HTMLFormElement實體或者FormData實體【必填】，
  需要檢測的資料物件只能是一個純粹的物件 “{}”、一個form元素或者一個FormData的實體，如果傳入一個其他型別則會拋出一個Error，
rules
Array 【必填】，
一個包含規則物件的陣列，如果是一個空陣列那么checker函式會立刻回傳一個檢測成功資源物件，而不會去進行任何檢測，
rules陣列中規則物件的結構規范:
- name
  String 該屬性定義了該規則物件作用于data當中的欄位名，【必填】
  不要重復定義name相同規則物件，checker永遠只會找陣列當中最先定義的那一個，如果未定義name屬性那么該規則物件則會被忽略，不會起作用，
- rule
  String或者RegExp實體，如果為其他型別則拋出一個TypeError，【必填】
  該屬性定義了規則檢測的具體行為，如果未定義name屬性那么該規則物件則會被忽略，不會起作用，如果rule等于一個空字串那么該規則也不會起作用，默認認為是檢測成功，
- errMsg
  String 【可選】
  該屬性定義了該規則檢測失敗時的錯誤資訊，如果未定義該屬性則采用內部失敗的錯誤資訊，
callback

Function 【可選】，
每次檢測完成一個欄位之后會呼叫的回呼函式，這個函式會接收一個檢測資源物件作為引數，如果callback不是一個Function型別那么就會忽略它，
returnType

String，【可選】，可選值包括:[s、m、a]，如果為其他值則默認為s，默認值為s，
s => single ，回傳第一個檢測失敗或者所有欄位均檢測成功的資源物件，如果發生檢測失敗函式將立刻回傳，后面的欄位不會執行檢測，
m => multiple，回傳所有檢測失敗欄位資源物件陣列【Array】，只包含檢測失敗的欄位的資源物件，會等所有欄位檢測完成后回傳，
a => all，回傳所有檢測欄位的資源物件陣列【Array】，無論檢測成功還是失敗，會等所有欄位檢測完成后回傳，

回傳值:

一個resObj或者包含了多個resObj物件的陣列，根據傳入的returnType引數決定，

resObj物件結構:

result ，一個Boolean值
表示驗證結果，
errMsg，一個String
表示錯誤資訊，result為true時為 “ok”，result為false時為檢測失敗的原因，
errField ，一個String
表示發生錯誤的欄位名
errRule，一個String
表示驗證失敗的規則名

2.2 規則物件中的rule的語法

2.2.1 rule的結構:

一條規則可由一潭訓多條子規則構成，多條子規則之間通過字符中杠分割(|)，
一條子規則可由規則名+一個或多個修飾符+零個或者一個引數構成，
修飾符描述了子規則的行為偏好，修飾符必須處于引數識別符號（:）或者（|）之前，子規則名之后，如果處于引數識別符號（:）之后則會被決議器決議成引數，
處在引數修飾符（:）之后子規則分隔符（|）之前的均會被決議器決議成引數，引數字串中不能出現（|）,出現了則會當成子規則分隔符，，
多條子規則之間的決議順序是從左到右的，所以檢測結構也是從左到右層疊的，
引數中的區間語法, a,b,c,d,… | a,b | a 在一些需要用到區間的規則中會被決議，區間或者范圍通過英文字符逗號分割(,)，如果撰寫錯誤則會拋出一個TypeError，

	const rule="子規則名.修飾符1.修飾2.修飾符n:引數|子規則2|子規則3"；

2.2.2 內置修飾符表：

修飾符	作用
.capital	如果欄位中存在英文字母那么必須全部大寫
.lowercase	如果欄位中存在英文字母那么必須全部小寫
.compose	如果子規則為多種字符組合那么欄位中每一種字符都必須存在至少一個

注意：修飾符均在指定規則下才能生效!

2.2.2.1 .capital示例

	const data = {
        name: 'mike'
    };
    const rules = [{
        name: 'name',
        rule: 'alpha.capital'//檢測的欄位如果存在字母則必須全部大寫
    }];

    const res = checker(data, rules);
    console.log(res);

下面是輸出結果:

2.2.2.2 .lowercase示例

	 const data = {
        name: 'Test'
    };
    const rules = [{
        name: 'name',
        rule: 'alpha.lowercase'
    }];

    const res = checker(data, rules);
    console.log(res);

下面是輸出結果:

2.2.2.3 .lowercase和.capital同時存在的情況下大小寫字母都可以存在示例

  	const data = {
        name: 'Test'
    };
    const rules = [{
        name: 'name',
        rule: 'alpha.lowercase.capital'
    }];

    const res = checker(data, rules);
    console.log(res);

下面是輸出結果:

2.2.2.4 .compose示例

2.2.2.4.1 加.compose修飾符之前

     name: 'Test'
    };
    const rules = [{
        name: 'name',
        //alphaDash:檢測數字、字母、下劃線、中橫線組合，不能含有其他字符
        rule: 'alphaDash'//默認情況下為包含關系，只要是數字、字母、下劃線、中橫線中的一種就行
    }];

    const res = checker(data, rules);
    console.log(res);

輸出結果

2.2.2.4.2 加了.compose修飾符之后

	 const data = {
        name: 'Test'
    };
    const rules = [{
        name: 'name',
        rule: 'alphaDash.compose'
    }];

    const res = checker(data, rules);
    console.log(res);

輸出結果

2.2.2.4.3 加了.compose修飾符之后的正確寫法

	 const data = {
        name: 'Test1-' //同時存在了字母、數字和下劃線或者中橫線
    };
    const rules = [{
        name: 'name',
        rule: 'alphaDash.compose'
    }];

    const res = checker(data, rules);
    console.log(res);

輸出結果

再次提醒：修飾符均在指定規則下才能生效!，在不支持的規則下使用會被忽略！

2.2.2.5 一條規則的決議流程圖

一條規則的決議流程圖

2.2.3 內置子規則表:

子規則名	作用	引數	可用修飾符
require	必填項	無	無
number	嚴格匹配數字(整數和小數)(不能含有任何其他非數字字符除了(-))	無	無
integer	嚴格匹配整數(不能含有任何其他非數字字符除了(-))	無	無
float	嚴格匹配小數(不能含有任何其他非數字字符除了(-))	無	無
boolean	檢測是否是一個布林值	無	無
alpha	檢測英文字母，不能含有其他字符	無	[.capital,.lowercase]
alphaNum	檢測數字、字母組合，不能含有其他字符	無	[.capital,.lowercase,.compose]
alphaDash	檢測數字、字母、下劃線、中橫線組合，不能含有其他字符	無	[.capital,.lowercase,.compose]
chs	檢測漢字，不能含有其他字符	無	無
chsAlpha	檢測漢字、字母組合，不能含有其他字符	無	[.capital,.lowercase,.compose]
chsAlphaNum	檢測漢字、數字、字母組合，不能含有其他字符	無	[.capital,.lowercase,.compose]
chsDash	檢測漢字、數字、字母、下劃線、中橫線組合，不能含有其他字符	無	[.capital,.lowercase,.compose]
json	檢測是否是一個json字串	無	無
email	檢測是否是一個合法郵箱	無	無
date	檢測是否是一個合法日期	無	無
url	檢測是否是一個合法URL	無	無
ip	檢測是否是一個合法IP(ipv和ipv6)	無	無
host	檢測是否是一個合法域名	無	無
idcard	身份證號(15位、18位數字)，最后一位是校驗位，可能為數字或字符X	無	無
telephone	檢測是否是一個合法座機電話(3-8)/(4-7)	無	無
phone	檢測是否是一個合法手機號碼	無	無
postcode	檢測是否是一個合法中國郵政編碼	無	無
max	檢測字串的最大長度	integer	無
min	檢測字串的最小長度	integer	無
length	檢測字串的是否等于某個長度或者長度是否在某個區間范圍內	integer or min,max	無
in	檢測欄位的值是否在某個范圍之內	a,b,c…	無
notIn	檢測欄位的值是否在不某個范圍之內	a,b,c…	無
between	檢測欄位的值是否在某個區間之內	number1,number2	無
notBetween	檢測欄位的值是否不在某個區間之內	number1,number2	無
before	檢測欄位的值是否在某個日期之前	一個合法日期	無
after	檢測欄位的值是否在某個日期之后	一個合法日期	無
expire	檢測欄位的值是否在某個日期范圍之間	date1,date2	無
notExpire	檢測欄位的值是否不在某個日期范圍之間	date1,date2	無
file	檢測是否是一個檔案或者類檔案	無	無
fileSize	檢測檔案的大小是否在指定區間范圍之內	size1,size2 or maxSize	無
fileExt	檢測檔案的后綴名是否在指定范圍之內	txt,png,jpg…	無
fileMime	檢測檔案的型別是否在指定范圍之內	text/plain,text/html…	無
confirm	檢測該欄位是否和另外一個欄位的值一致	String	無
different	檢測該欄位是否和另外一個欄位的值不一致	String	無
eq,=,same	檢測該欄位是否等于某個值	string or number	無
egt,>=	檢測該欄位是否大于等于某個值	number	無
gt,>	檢測該欄位是否大于某個值	number	無
elt,<=	檢測該欄位是否小于等于某個值	number	無
lt,<	檢測該欄位是否小于某個值	number	無

2.2.4 內置規則用法

2.2.4.1 格式驗證類

require
驗證某個欄位必填，例如：

	const data = {
        name: 'test'
    };
    const rules = [{
        name: 'name',
        rule: 'require'
    }];

    const res = checker(data, rules);
    console.log(res.result);//true

number
驗證某個欄位的值是否為數字(除了(-)之外不能包含其他字符)，例如：

	 const data = {
        name: "test", //false
        name2:"123", //true
        name3:"25a", //false
        name4:"-25.5" //true
    };
    const rules = [
        {
            name: "name",
            rule: "number"
        },
        {
            name:"name2",
            rule:"number"
        },
        {
            name:"name3",
            rule:"number"
        },
        {
            name:"name4",
            rule:"number"
        },
    ];

    const res = checker(data, rules,null, checker.A);

integer
驗證某個欄位的值是否為整數（不能帶有小數和其他字符），例如：

	 const data = {
        name: "123", //true
        name2:"123.3", //false
        name3:"25a", //false
        name4:"-25" //true
    };
    const rules = [
        {
            name: "name",
            rule: "integer"
        },
        {
            name:"name2",
            rule:"integer"
        },
        {
            name:"name3",
            rule:"integer"
        },
        {
            name:"name4",
            rule:"integer"
        },
    ];

    const res = checker(data, rules,null, checker.A);

float
驗證某個欄位的值是否為浮點數或者小數(必須帶有小數)，例如：

	 const data = {
        name: "123",//false
        name2:"123.3",//true
        name3:"25a",//false
        name4:"-25"//false
    };
    const rules = [
        {
            name: "name",
            rule: "float"
        },
        {
            name:"name2",
            rule:"float"
        },
        {
            name:"name3",
            rule:"float"
        },
        {
            name:"name4",
            rule:"float"
        },
    ];
   
    const res = checker(data, rules,null, checker.A);

boolean
驗證某個欄位的值是否為布林值布林值的true和false 或者字串型別的true和false均可，例如：

	const data = {
        open1:false,//true
        open2:true, //true
        open3:"false", //true
        open4:"true", //true
        open5:"false2",//false
        open6:0,//false
        open7:1//false
    };
    const rules = [
        {
            name: "open1",
            rule: "boolean"
        },
        {
            name: "open2",
            rule: "boolean"
        },
        {
            name: "open3",
            rule: "boolean"
        },
        {
            name: "open4",
            rule: "boolean"
        },
        {
            name: "open5",
            rule: "boolean"
        },
        {
            name: "open6",
            rule: "boolean"
        },
        {
            name: "open7",
            rule: "boolean"
        },
    ];
   
    const res = checker(data, rules,null, checker.A);

email
驗證某個欄位的值是否為email地址，例如：

	 const data = {
        me:"3014375877@qq.com",//true
        you:"3014375877@qq"//false
    };
    const rules = [
        {
            name: "me",
            rule: "email"
        },
        {
            name: "you",
            rule: "email"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

date
驗證某個欄位是否為有效日期,會在內部對日期值轉成Date物件進行判斷，

	const data = {
        date1:new Date().getTime(),//true
        date2:"2021-04-21",//true
        date3:'test '//false
    };
    const rules = [
        {
            name: "date1",
            rule: "date"
        },
        {
            name: "date2",
            rule: "date"
        },
        {
            name: "date3",
            rule: "date"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

alpha
驗證某個欄位的值是否為純字母（可使用 .capita l和 .lowercase 修飾符），例如：

	const data = {
       name1:"test",//true
       name2:"test2"//false
    };
    const rules = [
        {
            name: "name1",
            rule: "alpha"
        },
        {
            name: "name2",
            rule: "alpha"
        }
    ];
    const res = checker(data, rules,null, checker.A);

alphaNum
驗證某個欄位的值是否為字母和數字組成（可使用 .capita 、 .lowercase 和 .compose 修飾符），例如：

	const data = {
       name1:"test",//true
       name2:"test2",//true
       name3:"test$"//false
    };
    const rules = [
        {
            name: "name1",
            rule: "alphaNum"
        },
        {
            name: "name2",
            rule: "alphaNum"
        },
        {
            name:"name3",
            rule: "alphaNum"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

alphaDash
驗證某個欄位的值是否為字母和數字，下劃線_及破折號-組成（可使用 .capita 、 .lowercase 和 .compose 修飾符），例如：

	const data = {
       name1:"test",//true
       name2:"test2",//true
       name3:"test2_-",//true
       name4:"test$"//false
    };
    const rules = [
        {
            name: "name1",
            rule: "alphaDash"
        },
        {
            name: "name2",
            rule: "alphaDash"
        },
        {
            name:"name3",
            rule: "alphaDash"
        },
        {
            name:"name4",
            rule: "alphaDash"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

chs
驗證某個欄位的值只能是漢字，例如：

	  const data = {
       name1:"test",//false
       name2:"test2",//false
       name3:"你好test2_-",//false
       name4:"你好"//true
    };
    const rules = [
        {
            name: "name1",
            rule: "chs"
        },
        {
            name: "name2",
            rule: "chs"
        },
        {
            name:"name3",
            rule: "chs"
        },
        {
            name:"name4",
            rule: "chs"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

chsAlpha
驗證某個欄位的值只能是漢字、字母（可使用 .capita 、 .lowercase 和 .compose 修飾符），例如：

	 const data = {
       name1:"你好test",//true
       name2:"你好test2",//false
       name3:"你好test2_-",//false
       name4:"你好"//true
    };
    const rules = [
        {
            name: "name1",
            rule: "chsAlpha"
        },
        {
            name: "name2",
            rule: "chsAlpha"
        },
        {
            name:"name3",
            rule: "chsAlpha"
        },
        {
            name:"name4",
            rule: "chsAlpha"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

chsAlphaNum
驗證某個欄位的值只能是漢字、字母和數字（可使用 .capita 、 .lowercase 和 .compose 修飾符），例如：

	 const data = {
       name1:"你好test",//true
       name2:"你好test2",//true
       name3:"你好test2_-",//false
       name4:"你好"//true
    };
    const rules = [
        {
            name: "name1",
            rule: "chsAlphaNum"
        },
        {
            name: "name2",
            rule: "chsAlphaNum"
        },
        {
            name:"name3",
            rule: "chsAlphaNum"
        },
        {
            name:"name4",
            rule: "chsAlphaNum"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

chsDash
驗證某個欄位的值只能是漢字、字母、數字和下劃線_及破折號-（可使用 .capita 、 .lowercase 和 .compose 修飾符），例如：

	const data = {
       name1:"你好test",//true
       name2:"你好test2",//true
       name3:"你好test2_-",//true
       name4:"你好"//true
    };
    const rules = [
        {
            name: "name1",
            rule: "chsDash"
        },
        {
            name: "name2",
            rule: "chsDash"
        },
        {
            name:"name3",
            rule: "chsDash"
        },
        {
            name:"name4",
            rule: "chsDash"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

url
驗證某個欄位的值是否為合法的URL地址（這個url驗證的運算式提取自：npm包 async-validator的原始碼），例如：

	 const data = {
       link1:"https://www.kancloud.cn/manual/thinkphp5/129356",//true
       link2:"hpt://sacsac/"//false
    };
    const rules = [
        {
            name: "link1",
            rule: "url"
        },
        {
            name: "link2",
            rule: "url"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

ip
驗證某個欄位的值是否為合法的IP地址，支持驗證ipv4和ipv6格式的IP地址，例如：

	 const data = {
       adress1:"192.168.0.1",//true
       adress2:"352.saa.25.1"//false
    };
    const rules = [
        {
            name: "adress1",
            rule: "ip"
        },
        {
            name: "adress2",
            rule: "ip"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

2.2.4.2 長度和區間驗證類

in
驗證某個欄位的值是否在某個范圍，例如：

	 const data = {
      hobby1:"睡覺",//false
      hobby2:"吃飯"//true
    };
    const rules = [
        {
            name: "hobby1",
            rule: "in:跑步,吃飯"
        },
        {
            name: "hobby2",
            rule: "in:跑步,吃飯"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

notIn
驗證某個欄位的值不在某個范圍，例如：

	const data = {
      hobby1:"睡覺",//true
      hobby2:"吃飯"//false
    };
    const rules = [
        {
            name: "hobby1",
            rule: "notIn:跑步,吃飯"
        },
        {
            name: "hobby2",
            rule: "notIn:跑步,吃飯"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

between
驗證某個欄位的值是否在某個區間，例如：

	const data = {
     age1:18,//true
     age2:25//false
    };
    const rules = [
        {
            name: "age1",
            rule: "between:12,22"
        },
        {
            name: "age2",
            rule: "between:12,22"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

notBetween
驗證某個欄位的值不在某個范圍，例如：

	 const data = {
     age1:18,//false
     age2:25//true
    };
    const rules = [
        {
            name: "age1",
            rule: "notBetween:12,22"
        },
        {
            name: "age2",
            rule: "notBetween:12,22"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

length:num1,num2
如果驗證的資料是陣列，則判斷陣列的長度，
驗證某個欄位的值的長度是否在某個范圍，例如：

 const data = {
        test1:"hello",//false
        test2:"you"//true
    };
    const rules = [
        {
            name: "test1",
            rule: "length:1,3"
        },
        {
            name: "test2",
            rule: "length:1,3"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

或者指定長度 length:n
如果驗證的資料是陣列，則判斷陣列的長度，

	 const data = {
        test1:"hello",//true
        test2:"you"//false
    };
    const rules = [
        {
            name: "test1",
            rule: "length:5"
        },
        {
            name: "test2",
            rule: "length:5"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

max:number
驗證某個欄位的值的最大長度
如果驗證的資料是一個數字,則判斷數字的值，
如果驗證的資料是陣列，則判斷陣列的長度，
如果驗證的資料是File物件或者類檔案物件(擁有size、type、name屬性的物件)，則判斷檔案的大小，
檢測的欄位型別必須是Number、String、Array、File、類File型別中的一種，如果是其他型別則會拋出一個TypeError，
例如：

	 const data = {
        test1:"hello",//true
        test2:[1,2,3,4,5],//true
        test3:2,//true
        test4:6,//false
    };
    const rules = [
        {
            name: "test1",
            rule: "max:5"
        },
        {
            name: "test2",
            rule: "max:5"
        },
        {
            name:"test3",
            rule:"max:5"
        },
        {
            name:"test4",
            rule:"max:5"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

min:number
驗證某個欄位的值的最小長度
如果驗證的資料是一個數字,則判斷數字的值，
如果驗證的資料是陣列，則判斷陣列的長度，
如果驗證的資料是File物件或者類檔案物件(擁有size、type、name屬性的物件)，則判斷檔案的大小，
檢測的欄位型別必須是Number、String、Array、File、類File型別中的一種，如果是其他型別則會拋出一個TypeError， 例如：

	const data = {
        test1:"hell",//false
        test2:[1,2,3,4],//false
        test3:2,//false
        test4:6,//ftrue
    };
    const rules = [
        {
            name: "test1",
            rule: "min:5"
        },
        {
            name: "test2",
            rule: "min:5"
        },
        {
            name:"test3",
            rule:"min:5"
        },
        {
            name:"test4",
            rule:"min:5"
        },
    ];
   
    const res = checker(data, rules,null, checker.A);

after:合法日期
驗證某個欄位的值是否在某個日期之后，例如：

	const data = {
       date1:"2021-04-21",//true
       date2:"2020/01/01"//false
    };
    const rules = [
        {
            name: "date1",
            rule: "after:2021/01/01"
        },
        {
            name: "date2",
            rule: "after:2021/01/01"
        },
    ];
   
    const res = checker(data, rules,null, checker.A);

before:合法日期
驗證某個欄位的值是否在某個日期之前，例如：

	const data = {
       date1:"2021-04-21",//false
       date2:"2020/01/01"//true
    };
    const rules = [
        {
            name: "date1",
            rule: "before:2021/01/01"
        },
        {
            name: "date2",
            rule: "before:2021/01/01"
        },
    ];
   
    const res = checker(data, rules,null, checker.A);

expire:開始日期,結束日期
驗證當前欄位是否在某個有效日期之內，例如：

	const data = {
       date1:"2021-04-21",//false
       date2:"2020/01/01"//true
    };
    const rules = [
        {
            name: "date1",
            rule: "expire:2020/01/01,2021/01/01"
        },
        {
            name: "date2",
            rule: "expire:2020/01/01,2021/01/01"
        },
    ];
   
    const res = checker(data, rules,null, checker.A);

notExpire:開始日期,結束日期
驗證當前欄位不在某個有效日期之內，例如：

	 const data = {
       date1:"2021-04-21",//true
       date2:"2020/01/01"//false
    };
    const rules = [
        {
            name: "date1",
            rule: "notExpire:2020/01/01,2021/01/01"
        },
        {
            name: "date2",
            rule: "notExpire:2020/01/01,2021/01/01"
        },
    ];
   
    const res = checker(data, rules,null, checker.A);

2.2.4.3 欄位比較類

confirm
驗證某個欄位是否和另外一個欄位的值一致，另一個欄位必須要在data中存在，否則將會拋出一個Error，例如：

	 const data = {
       pass1:"123456",//true
       rePass1:"123456",//true
       rePass2:"123"//false
    };
    const rules = [
        {
            name: "pass1",
            rule: "max:10"
        },
        {
            name: "rePass1",
            rule: "confirm:pass1"
        },
        {
            name: "rePass2",
            rule: "confirm:pass1"
        },
    ];
   
    const res = checker(data, rules,null, checker.A);

different
驗證某個欄位是否和另外一個欄位的值不一致，另一個欄位必須要在data中存在，否則將會拋出一個Error，例如：

	const data = {
       pass1:"123456",//true
       rePass1:"123456",//false
       rePass2:"123"//true
    };
    const rules = [
        {
            name: "pass1",
            rule: "max:10"
        },
        {
            name: "rePass1",
            rule: "different:pass1"
        },
        {
            name: "rePass2",
            rule: "different:pass1"
        },
    ];
   
    const res = checker(data, rules,null, checker.A);

eq 或者 = 或者 same
驗證是否等于某個值，檢測的值必須是個string或者number，否則會拋出一個TypeError，例如：

	 const data = {
      age1:18,//true
      age2:15,//false
      name1:"mike",//true
      name2:"jhon"//false
    };
    const rules = [
        {
            name: "age1",
            rule: "=:18"
        },
        {
            name: "age2",
            rule: "=:18"
        },
        {
            name: "name1",
            rule: "=:mike"
        },
        {
            name: "name2",
            rule: "=:mike"
        },
    ];
   
    const res = checker(data, rules,null, checker.A);

egt 或者 >=
驗證是否大于等于某個值，檢測的值必須是個string或者number，引數必須是個number，否則會拋出一個TypeError，例如：

	const data = {
      age1:24,//true
      age2:15,//false
    };
    const rules = [
        {
            name: "age1",
            rule: ">=:18"
        },
        {
            name: "age2",
            rule: ">=:18"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

gt 或者 >
驗證是否大于某個值，檢測的值必須是個string或者number，引數必須是個number，否則會拋出一個TypeError，例如：

	const data = {
      age1:24,//true
      age2:15,//false
    };
    const rules = [
        {
            name: "age1",
            rule: ">:18"
        },
        {
            name: "age2",
            rule: ">:18"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

elt 或者 <=
驗證是否小于等于某個值，檢測的值必須是個string或者number，引數必須是個number，否則會拋出一個TypeError，例如：

	const data = {
      age1:19,//false
      age2:15,//true
    };
    const rules = [
        {
            name: "age1",
            rule: "<=:18"
        },
        {
            name: "age2",
            rule: "<=:18"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

lt 或者 <
驗證是否小于某個值，檢測的值必須是個string或者number，引數必須是個number，否則會拋出一個TypeError，例如：

	const data = {
      age1:19,//false
      age2:15,//true
    };
    const rules = [
        {
            name: "age1",
            rule: "<:18"
        },
        {
            name: "age2",
            rule: "<:18"
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

2.2.4.4 自定義正則運算式驗證

	 const data = {
        test1:"abcd",//true
        test2:"ab"//false
    };
    const reg=/[a-z]{3,5}/;
    const rules = [
        {
            name: "test1",
            rule: reg
        },
        {
            name: "test2",
            rule: reg
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

2.2.4.5 檔案上傳類

file =>rule:‘file’
驗證是否是一個上傳檔案

fileExt:允許的檔案后綴 => rule: ‘fileExt:ext1,ext2,ext3…’
驗證上傳檔案后綴

fileMime:允許的檔案型別=>rule:‘type1,type2,type3…’
驗證上傳檔案型別

fileSize:允許的檔案位元組大小=>rule:‘fileSize:maxSize’ 或者 rule:‘fileSize:minSize,maxSize’
不推薦采用這個規則，推薦采用max或者min規則來限定檔案大小

  rule:'fileSize:1024|fileExt:png,jpg,jpeg,txt|fileMime:text/plain,text/html,image/png,/image/jpeg'

2.3 自定義規則

checker.defineRule(ruleName, handler);

引數：

ruleName
- String 【必填】，
  需要檢測的資料物件只能是一個String，如果傳入一個其他型別則會拋出一個TypeError，
  規則名必須是唯一的，不能跟內置規則名重復，否則會拋出一個Erro，r
handler
Function 【必填】，
規則的處理函式接受一個options引數，在決議到該規則時會被呼叫，如果handler不是一個Function型別則會拋出一個TypeError，
handler的引數options物件的結構規范:
- val
  any ，要檢測的欄位的值，
- arg
  String，規則運算式中的引數，
- modifiers
  Array ，規則運算式中的修飾符
- ruleName
  String ，當前呼叫處理函式的規則名字
- getField
  Function ，根據data中的欄位名獲取data中的某個欄位值不存在回傳undefined，
- handler的回傳值規范:
  注意：handler須回傳一個布林值表示檢測成功還是失敗，回傳其他一切型別都會被轉換成對應的布林值！

回傳值:

一個Boolean值，true表示添加成功，false表示添加失敗，

注意：添加成功之后該規則就會被快取成內置規則，只在該check存在的生命周期內有效!

示例

	const data = {
        test1:"abcd",//true
        test2:"ab"//false
    };

    checker.defineRule('test ',({val})=>{
        return /[a-z]{3,5}/.test(val);
    });

    const rules = [
        {
            name: "test1",
            rule: 'test '
        },
        {
            name: "test2",
            rule: 'test '
        }
    ];
   
    const res = checker(data, rules,null, checker.A);

3.1 checker的靜態屬性和靜態方法

	
    //靜態屬性
    checker.S;  //對應checker引數中的returnType 回傳單個值
    checker.M;  //對應checker引數中的returnType 回傳多個錯誤陣列
    checker.A; //對應checker引數中的returnType  回傳所有檢測結果陣列

    //靜態方法 均回傳一個布林值 true表示檢測成功 false表示失敗
    //檢測一個物件上有沒有某個屬性，只會檢測物件自身而不會檢測原型鏈，對應Object.hasOwnProperty方法
    checker.has(obj,prop) ;
    //是否含有大寫字母
    checker.hasCapital(v);
     //是否含有小寫字母
    checker.hasLowerCase(v);
     //是否含含有檔案
    checker.hasChs(v);
    //是否是string型別
    checker.isString(v);
    //能否隱式轉成String 只有number型別和string型別才能回傳true 其他一律false
    checker.isStringable(v);
    //檢測是否是一個物件
    checker.isObject(v);
    //是否是一個純粹的物件 {} 其他像Array、RegExp等等等都會回傳false
    checker.isPlainObject(v);
    //嚴格檢測整數
    checker.isInteger(v);
     //嚴格檢測浮點數
    checker.isFloat(v);
    //嚴格檢測英文字母
    checker.isAlpha(v);
     //嚴格檢測字母+數字組合 包含范圍
    checker.isAlphaNumContain(v);
    //嚴格檢測字母+數字組合 必須同時存在字母和數字=>組合范圍
    checker.isAlphaNumCompose(v);
    //驗證某個欄位的值是否為字母和數字，下劃線_及中橫線-=>包含范圍
    checker.isAlphaDashContain(v);
    //驗證某個欄位的值是否為字母和數字，下劃線_及中橫線-=>組合范圍
    checker.isAlphaDashCompose(v);
    //只能是漢字
    checker.isChs(v);
    //驗證某個欄位的值只能是漢字、字母=>包含關系
    checker.isChsAlphaContain(v);
    //驗證某個欄位的值只能是漢字、字母=>組合關系
    checker.isChsAlphaCompose(v);
     //驗證某個欄位的值只能是漢字、字母和數字=>包含關系
    checker.isChsAlphaNumContain(v);
    //驗證某個欄位的值只能是漢字、字母和數字=>組合關系
    checker.isChsAlphaNumCompose(v);
    //驗證某個欄位的值只能是漢字、字母、數字和下劃線_及破折號-=>包含模式
    checker.isChsDashContain(v);
    //驗證某個欄位的值只能是漢字、字母、數字和下劃線_及破折號-=>組合模式
    checker.isChsDashCompose(v);
    //是否為有效的JSON字串
    checker.isValidJSON(v);
    //驗證是否是有效日期
    checker.isValidDate(v);
    //驗證是否是有效郵箱
    checker.isEmail(v);
     //檢測ip地址 ipv4/ipv6
    checker.isIP(v);
    //驗證是否為一個合法的域名
    checker.isHost(v);
    //驗證是否為一個合法的URL
    checker.isURL(v);
    //身份證號(15位、18位數字)，最后一位是校驗位，可能為數字或字符X
    checker.isIdcard(v);
    //座機電話號碼
    checker.isTelephoneNumber(v);
     //手機電話號碼
    checker.isPhone(v);
     //中國郵政編碼
    checker.isPostCode(v);
    //檢測是否是一個檔案 或者類檔案物件 含有(size、type、name屬性的物件)
    checker.isFile(v);

3.2 結束語:

檔案就寫這些，這個庫暫未經過嚴格的測驗、商用請慎重！！！
可能會有一些隱藏的小Bug如果發現可以添加我(qq：3014375877)告訴我，我即時修改！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/279276.html

標籤：其他

上一篇：大廠面試必問——什么是JS中的閉包

下一篇：怎么理解JavaScript中的閉包

checker(單獨的js驗證模塊)：使用檔案

1.1 為什么要單獨寫一個js驗證模塊？

1.2 設計靈感

1.3 github下載地址:checker

1.4 使用方式：

1.4.1 通過<script>標簽本地或者網路引入

1.4.2 使用ES6 Module匯入

2.1 使用語法：

checker(data,rules,callback,returnType);

引數：

回傳值:

resObj物件結構:

2.2 規則物件中的rule的語法

2.2.1 rule的結構:

2.2.2 內置修飾符表：

2.2.2.1 .capital示例

2.2.2.2 .lowercase示例

2.2.2.3 .lowercase和.capital同時存在的情況下大小寫字母都可以存在 示例

2.2.2.4 .compose示例

2.2.2.4.1 加.compose修飾符之前

2.2.2.4.2 加了.compose修飾符之后

2.2.2.4.3 加了.compose修飾符之后的正確寫法

2.2.2.5 一條規則的決議流程圖

2.2.3 內置子規則表:

2.2.4 內置規則用法

2.2.4.1 格式驗證類

2.2.4.2 長度和區間驗證類

2.2.4.3 欄位比較類

2.2.4.4 自定義正則運算式驗證

2.2.4.5 檔案上傳類

2.3 自定義規則

checker.defineRule(ruleName, handler);

引數：

回傳值:

示例

3.1 checker的靜態屬性和靜態方法

3.2 結束語:

2.2.2.3 .lowercase和.capital同時存在的情況下大小寫字母都可以存在示例