因?yàn)樾枰獙?duì)密碼和手機(jī)號(hào)進(jìn)行一下表單驗(yàn)證，然后去博客上借鑒了幾段，今天有空研究了一下正則，剛開(kāi)始看確實(shí)挺麻煩，但其實(shí)就是一個(gè)判斷規(guī)則，這篇文章主要以正則表達(dá)式的介紹為主，關(guān)于element的驗(yàn)證的代碼并還沒(méi)有深入研究，只是簡(jiǎn)單提及一下，以一下兩段為例展示element自定義表單驗(yàn)證。

首先我們?cè)?/span>data的return外構(gòu)建一個(gè)簡(jiǎn)單的判斷函數(shù)，

其中value就是我們表單傳遞過(guò)來(lái)的需要驗(yàn)證的數(shù)據(jù)，一般是選項(xiàng)或者文字?jǐn)?shù)字，我們這里是關(guān)于密碼的。Callback就是自定義校驗(yàn)反饋函數(shù)，當(dāng)數(shù)據(jù)通過(guò)了你的校驗(yàn)，callback就表示校驗(yàn)正確，若里邊傳入了錯(cuò)誤信息，callback就會(huì)拋出你傳入錯(cuò)誤信息。

接下來(lái)看正則，^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$

^和$分別代表著開(kāi)始和結(jié)束，首先我們把它分成三塊。

第一塊：(?![0-9]+$) ?!的意思是正向否定預(yù)查，簡(jiǎn)單來(lái)說(shuō)就是不能匹配后邊的東西，而他后邊的東西[0-9]+的意思是0-9可以有最少一個(gè)或者很多個(gè)，最后結(jié)束。

第二塊：(?![a-zA-Z]+$)，和上邊一樣，只不過(guò)這里檢測(cè)的是26個(gè)大小寫(xiě)字母。

第三塊：[0-9A-Za-z]{4,20}意思是可以輸入數(shù)字和字母，他們的個(gè)數(shù)最小是4，最多是20。

然后，我們通過(guò)test判斷我們的數(shù)據(jù)是不是滿(mǎn)足這個(gè)正則，當(dāng)是全英文的時(shí)候被(?![0-9]+$)匹配到了，但是(?![a-zA-Z]+$)沒(méi)有匹配到，所以返回的是false，同理全數(shù)字或者少于4個(gè)多于20個(gè)依然會(huì)返回false。

返回false后就會(huì)通過(guò)我們的if判斷進(jìn)入true的區(qū)域，然后callback就拋出了我們?cè)O(shè)定的錯(cuò)誤信息。當(dāng)是數(shù)值true的時(shí)候才會(huì)正確通過(guò)校驗(yàn)。

Ok校驗(yàn)方法設(shè)置完成，我們把rules的validator校驗(yàn)規(guī)則換成我們的函數(shù)。

pattern的正則就更簡(jiǎn)單了，我會(huì)在文章結(jié)尾處為大家解釋。

這里拿第一個(gè)舉例，

按下確定就會(huì)走addformvAlida()方法，我們傳入需要校驗(yàn)的對(duì)象，這個(gè)element自帶的方法validate就會(huì)立刻校驗(yàn)一次需要校驗(yàn)的對(duì)象中的數(shù)據(jù)，當(dāng)全部校驗(yàn)通過(guò)才會(huì)走下一步的請(qǐng)求，如果有一個(gè)校驗(yàn)是錯(cuò)誤的就會(huì)返回false，阻止進(jìn)行下一步。

關(guān)于pattern的正則的解釋?zhuān)@是判斷手機(jī)號(hào)的，同樣的^和$分別代表著開(kāi)始和結(jié)束，首先他的開(kāi)始必須是1，然后他后面的1位數(shù)字只能輸入3-9，因?yàn)檫@里既沒(méi)有*（0次或多次）也沒(méi)有+（1次或多次）號(hào)，所以?xún)H代表1位數(shù)字，然后\d等同于[0-9]，最后結(jié)束的時(shí)候必須等于9位。