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

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

其中value就是我們表單傳遞過來的需要驗證的數(shù)據(jù)，一般是選項或者文字數(shù)字，我們這里是關(guān)于密碼的。Callback就是自定義校驗反饋函數(shù)，當(dāng)數(shù)據(jù)通過了你的校驗，callback就表示校驗正確，若里邊傳入了錯誤信息，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)是全英文的時候被(?![0-9]+$)匹配到了，但是(?![a-zA-Z]+$)沒有匹配到，所以返回的是false，同理全數(shù)字或者少于4個多于20個依然會返回false。

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

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

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

這里拿第一個舉例，

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

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