【入門】淺談JS表單驗證之郵箱驗證

      聲明：這是一些寫給本身看的文章，總結本身在自學前端路上遇到的一些問題及目前的處理辦法，第一次寫這類的文章，第一次獻給掘金了，我會一直寫下去，寫給本身看。固然若是你不幸的看到這篇文章（應該沒人看到吧...0.0...哈哈），又恰巧你是一位前端大牛或者處理過相關的問題，又恰好發現文章中解決問題的思路或者其餘有問題（或者實在看不下去了，太爛了，不得不站出來講話以防止繼續污染廣大看客的眼球，還世界一個和平......┑(￣Д ￣)┍）.....（攤手）...），但願你能不吝賜教，這或許是對我這些正在前端路上的人最大的幫助。又或許你同我同樣正在路上，也正遇到了這個問題，解決了你的問題，那就再好不過了，一塊兒共勉吧！

好了，廢話一大頓，幹啥呢.........0.0
在剛開始學習JS的時候，表單的驗證是很好的練習題目。如下是結合百度谷歌搜索的答案和本身的過濾，在郵箱驗證以前先讓咱們連看下一些經常使用郵箱都有哪些格式？
常見：xxx@qq.com xxx@126.com xxx@163.com xxx@sina.com xxx@gmail.com xxx@139.com xxx@sohu.com xxx@hotmail.com xxx@aliyun.com xxx@yeah.net
xxx@yahoo.com 等
及一些企業郵箱
這裏就不一一列舉了.............0.0
雖然不少，郵箱的格式都有相同的規則。必須含有@和‘.’ , 且@必須在‘.’的前面，@的後面至少有四個字符，@的前面不能爲空，通常要求前面至少有六個字符（假設估計，其餘規則暫時沒想到....0.0）。

知道了這些，驗證思路以下

1、驗證郵箱思路

1.不能爲空或全是空格
2.有@和‘.’
3.@的前面至少有六位字符之多十八位（假設這麼多），字符內容爲0-九、a-z、A-Z、‘ ’、‘-’
4.@的後面必須有‘.’
5.@與‘.’之間至少兩位字符至多八位字符（假設那麼多），字符內容爲a-z、A-Z
6.‘.’以後至少有兩位至多八位（仍是假設那麼多...0.0怪我了，沒找到標準，或許根本沒有標準），字符內容a-z、A-Z
7.（暫時就想到這樣了...0.0）

2、思路的實行

1.正則表達式

創建正則兩種寫法：

flags：標誌；一個正則表達式能夠帶一個或多個標誌。分爲三種：g、i、m
g：全局模式，即在因此字符串中被應用。
i：不區分大小寫模式。
m：多行模式，即查詢多行文本。
pattern：即正則表達式

一些經常使用的符號意義

[]:查找方括號之間知足條件的字符
[^]:查找不知足條件的字符
.:查找除換行符以外的單個任意字符，並顯示該字符
\w \W:查找單詞/非單詞字符；單詞包括：A-Z、a-z、0-九、下劃線；(\w==[a-zA-Z0-9 ]   \W==[^a-zA-Z0-9_ ])
\d \D:查找數字/非數字字符
\s \S：查找空白\非空白字符；空白字符有：空格、製表符、換行符、回車、換頁符、垂直換行符
\b \B:查找單詞爲/非邊界的單詞
\n：換行符
\f：換頁符
\r：回車
\t：製表符
：匹配包含前面字符零個或多個的字符；等價{0，}
+：匹配包含前面字符一個或多個的字符；等價{1，}
？:匹配包含前面字符零個或一個的字符；等價{0,1}。或指明一個非貪婪限定符
{n}：匹配n個前面的字符
{n，}：匹配至少個前面的字符
{n，m}：匹配n到m之間（包含）個前面的字符
$：之前面字符結尾的字符
^:之前面字符開頭的字符
|:或，二者匹配一個
():匹配括號裏的並獲取匹配內容
經常使用的一些字符意義基本就是上面這些了（其餘還有的話目前本身的水平能用這些就能夠了）。

2.網上能搜索到驗證郵箱的正則表達式

在一開始須要驗證郵箱寫正則表達式的時候，先去百度谷歌了一下，看來下放在網上用於驗證的表達式，一下列舉幾個通常能在網上搜到的式子，都是一串串非人類直接讀的相似這樣&&^[]%%$0-9的一堆（我也不知道我打的什麼，隨便打的.....0.0），這可不行，竟然看不懂...0.0，一下在激發了個人求知慾，得弄懂啊，便去看了各個符號表明的意思，那麼接下了就解析一下搜到的正則表達式都說的是些什麼鬼......0.0

式一：^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+.[a-zA-Z0-9_-]+$

這一段是我在網上見過最屢次數的表達式（感受是），那麼他在說啥呢？還記得^$這兩個傢伙吧！開始和結束，看來規則在裏面的式子了；[]+去匹配裏面的內容一次或屢次，而後遇到@，便是說 容許匹配的式子裏有@且@前面的東東必須是[]裏面的內容；匹配完後繼續，還有呢！ @後面也要給我是[a-zA-Z0-9_-]+裏面的內容，而後還得有個‘.’在這裏，‘.’後面也是方括號裏的內容，直到遇到$，只是由於在人羣中瞟了你一眼，而後就 結束了。
注：乍一看，老鐵沒毛病666，確實有@和‘.’了，但一想不對啊，@先後沒有說多少個字符啊，有@和‘.’但若是前面只有一個字符，這確定是不行的。納尼....0.0不行？差評...退貨

式二：^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$;

網上搜到的第二個，一樣來解析下吧！
^嘟嘟...開始了，匹配[]裏面的一次屢次（老樣子），遇到@，再匹配[]裏面的一次或屢次...0.0，而後遇到‘.’,匹配[]裏面的內容,{2,3}便是給我匹配至少2次最多3次，最後又遇到了{1,2}和前面一個括號，咋回事？（黑人問號），莫非這就是傳說中的給我匹配括號裏面的1到2次嗎？
立刻去驗證了一下，好像不是這麼回事，後面{1,2}貌似沒他什麼事。看來這裏仍是有問題的..............（攤手0.0）
不知你發現沒有，這個例子能夠控制位數了，即控制@及‘.’能夠擁有多少個字符了。沒錯，就是這樣的。

式三：.................舉不勝舉

說了這麼多，今天的問題尚未解決，說好的驗證郵箱呢？你卻是寫個正則表達式出來噻...0.0.......寫就寫，瞧你那嘚瑟的樣........（攤手）0.0

自創：(不發幾個圖都不知道本身在記錄...0.0)

經測試，按上面驗證思路基本實現0.0，暫時的思路就這樣，也不知道可行不，之後再想到了再填加。

補充：正則表達式運算法則

按照加減法運算法則樣，相同優先級從左到右進行運算，不一樣優先級先高後低進行運算。
那麼誰高誰低呢？
以下：

寫給本身看的第一篇筆記，主要是怕學習後就忘了，寫下來，之後能夠回來看。第一次這這類筆記，比記在筆記本上好多了，之後也會以這樣的方式來記筆記，挺好的！ 一個在前端的路上的蝸牛，沒錯就是我，我跑得慢，大家都被欺負我......0.0