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

首先我們在data的return外構(gòu)建一個簡單的判斷函數(shù)，

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

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

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

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

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

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

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

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

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

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

這里拿第一個舉例，

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

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