課堂筆記web apis六天

WebAPIs第六天正則&階段案例能夠利用正則表達式校驗輸入信息的合法性具備利用正則表達式驗證小兔鮮注冊頁面表單的能力正則表達式綜合案例階段案例正則表達式介紹語法元字符修飾符01目標：學(xué)習正則表達式概念及語法，編寫簡單的正則表達式實現(xiàn)字符的查找或檢測。1.1什么是正則表達式正則表達式（RegularExpression）是用于匹配字符串中字符組合的模式。在JavaScript中，正則表達式也是對象通常用來查找、替換那些符合正則表達式的文本，許多語言都支持正則表達式。請在上圖中找出【戴帽子和眼鏡的男人】戴帽子、戴眼鏡、男人都是描述信息，通過這些信息能夠在人群中查找到確定的某個人，那么這些用于查找的描述信息編寫一個模式，對應(yīng)到計算機中就是所謂的正則表達式。1.1什么是正則表達式正則表達式在JavaScript中的使用場景：例如驗證表單：用戶名表單只能輸入英文字母、數(shù)字或者下劃線，昵稱輸入框中可以輸入中文(匹配)比如用戶名:/^[a-z0-9_-]{3,16}$/過濾掉頁面內(nèi)容中的一些敏感詞(替換)，或從字符串中獲取我們想要的特定部分(提取)等。1.正則表達式是什么？

是用于匹配字符串中字符組合的模式2.正則表達式有什么作用？

表單驗證（匹配）過濾敏感詞（替換）字符串中提取我們想要的部分（提取）正則表達式介紹語法元字符修飾符01目標：學(xué)習正則表達式概念及語法，編寫簡單的正則表達式實現(xiàn)字符的查找或檢測。1.2語法我們想要查找是否有戴眼鏡的人,怎么做呢？定義規(guī)則：戴眼鏡的根據(jù)規(guī)則去查找：找到則返回正則同樣道理，我們分為兩步：定義規(guī)則查找比如：查找下面文本中是否包含字符串'前端'1.2語法JavaScript中定義正則表達式的語法有兩種，我們先學(xué)習其中比較簡單的方法：1.定義正則表達式語法：其中//是正則表達式字面量比如：1.2語法2.判斷是否有符合規(guī)則的字符串：test()方法用來查看正則表達式與指定的字符串是否匹配語法：比如：如果正則表達式與指定的字符串匹配

，返回true，否則false1.正則表達式使用分為幾步？

定義正則表達式檢測查找是否匹配1.2語法3.檢索（查找）符合規(guī)則的字符串：exec()方法在一個指定字符串中執(zhí)行一個搜索匹配語法：比如：如果匹配成功，exec()

方法返回一個數(shù)組，否則返回null1.正則表達式檢測查找test方法和exec方法有什么區(qū)別？

test方法用于判斷是否有符合規(guī)則的字符串，返回的是布爾值找到返回true，否則falseexec方法用于檢索（查找）符合規(guī)則的字符串，找到返回數(shù)組，否則為null正則表達式介紹語法元字符修飾符01目標：學(xué)習正則表達式概念及語法，編寫簡單的正則表達式實現(xiàn)字符的查找或檢測。1.3元字符目標：能說出什么是元字符以及它的好處普通字符:大多數(shù)的字符僅能夠描述它們本身，這些字符稱作普通字符，例如所有的字母和數(shù)字。

也就是說普通字符只能夠匹配字符串中與它們相同的字符。元字符(特殊字符）是一些具有特殊含義的字符，可以極大提高了靈活性和強大的匹配功能。比如，規(guī)定用戶只能輸入英文26個英文字母，普通字符的話abcdefghijklm…..但是換成元字符寫法：[a-z]參考文檔：MDN：正則測試工具:1.什么是元字符以及它的好處是什么？是一些具有特殊含義的字符，可以極大提高了靈活性和強大的匹配功能比如英文26個英文字母，我們使用元字符[a-z]簡介和靈活1.3元字符為了方便記憶和學(xué)習，我們對眾多的元字符進行了分類：邊界符（表示位置，開頭和結(jié)尾，必須用什么開頭，用什么結(jié)尾）量詞（表示重復(fù)次數(shù)）字符類（比如\d表示0~9）1.3元字符1.邊界符正則表達式中的邊界符（位置符）用來提示字符所處的位置，主要有兩個字符如果^和$在一起，表示必須是精確匹配。1.3元字符1.邊界符正則表達式中的邊界符（位置符）用來提示字符所處的位置，主要有兩個字符1.3元字符為了方便記憶和學(xué)習，我們對眾多的元字符進行了分類：邊界符（表示位置，開頭和結(jié)尾，必須用什么開頭，用什么結(jié)尾）量詞（表示重復(fù)次數(shù)）字符類（比如\d表示0~9）1.3元字符2.量詞量詞用來設(shè)定某個模式出現(xiàn)的次數(shù)注意：逗號左右兩側(cè)千萬不要出現(xiàn)空格1.3元字符2.量詞量詞用來設(shè)定某個模式出現(xiàn)的次數(shù)+表示重復(fù)至少1次?表示重復(fù)0次或1次*表示重復(fù)0次或多次{m,n}表示復(fù)m到n次1.3元字符為了方便記憶和學(xué)習，我們對眾多的元字符進行了分類：邊界符（表示位置，開頭和結(jié)尾，必須用什么開頭，用什么結(jié)尾）量詞（表示重復(fù)次數(shù)）字符類（比如\d表示0~9）1.3元字符3.字符類：[]匹配字符集合后面的字符串只要包含abc中任意一個字符，都返回true。1.3元字符3.字符類：[]里面加上-連字符使用連字符-表示一個范圍比如：[a-z]表示a到z26個英文字母都可以[a-zA-Z]表示大小寫都可以[0-9]表示0~9的數(shù)字都可以認識下：1.3元字符3.字符類：[]里面加上^取反符號比如：

[^a-z]匹配除了小寫字母以外的字符注意要寫到中括號里面1.3元字符3.字符類：（2）.匹配除換行符之外的任何單個字符字符類.(點)代表什么意思？匹配除換行符之外的任何單個字符字符類[]有若干代表什么意思？[abc]匹配abc其中的任何單個字符[a-z]匹配26個小寫英文字母其中的任何單個字符[^a-z]匹配除了26個小寫英文字母之外的其他任何單個字符用戶名驗證案例需求：用戶名要求用戶英文字母,數(shù)字,下劃線或者短橫線組成，并且用戶名長度為6~16位分析：①：首先準備好這種正則表達式模式/^[a-zA-Z0-9-_]{6,16}$/②：當表單失去焦點就開始驗證.③：如果符合正則規(guī)范,則讓后面的span標簽添加right類.④：如果不符合正則規(guī)范,則讓后面的span標簽添加wrong類.昵稱案例需求：要求用戶只能輸入中文分析：①：首先準備好這種正則表達式模式/^[\u4e00-\u9fa5]{2,8}$/②：當表單失去焦點就開始驗證.③：如果符合正則規(guī)范,則讓后面的span標簽添加right類.④：如果不符合正則規(guī)范,則讓后面的span標簽添加wrong類.1.3元字符3.字符類：(3)預(yù)定義：指的是某些常見模式的簡寫方式。正則表達式介紹語法元字符修飾符01目標：學(xué)習正則表達式概念及語法，編寫簡單的正則表達式實現(xiàn)字符的查找或檢測。1.4修飾符修飾符約束正則執(zhí)行的某些細節(jié)行為，如是否區(qū)分大小寫、是否支持多行匹配等語法：i是單詞ignore的縮寫，正則匹配時字母不區(qū)分大小寫g是單詞global的縮寫，匹配所有滿足正則表達式的結(jié)果1.4修飾符替換replace替換語法：過濾敏感字需求：要求用戶不能輸入敏感字比如，pink老師上課很有**分析：①：用戶輸入內(nèi)容②：內(nèi)容進行正則替換查找，找到敏感詞，進行**

③：要全局替換使用修飾符g正則表達式綜合案例階段案例小兔鮮頁面注冊小兔鮮頁面注冊分析業(yè)務(wù)模塊：①：發(fā)送驗證碼模塊②：各個表單驗證模塊③：勾選已經(jīng)閱讀同意模塊④：下一步驗證全部模塊

只要上面有一個input驗證不通過就不同意提交小兔鮮頁面注冊需求①：發(fā)送驗證碼

用戶點擊之后，顯示05秒后重新獲取

時間到了，自動改為重新獲取需求②：用戶名驗證（注意封裝函數(shù)verifyxxx）,失去焦點觸發(fā)這個函數(shù)

正則

/^[a-zA-Z0-9-_]{6,10}$/

如果不符合要求，則出現(xiàn)提示信息并returnfalse中斷程序

否則則返回returntrue

之所以返回布爾值，是為了最后的提交按鈕做準備

偵聽使用change事件，當鼠標離開了表單，并且表單值發(fā)生了變化時觸發(fā)（類似京東效果）小兔鮮頁面注冊需求③：手機號驗證

正則:/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/

其余同上需求④：驗證碼驗證

正則

/^\d{6}$/

其余同上需求⑤：密碼驗證

正則

/^[a-zA-Z0-9-_]{6,20}$/

其余同上小兔鮮頁面注冊需求⑥：再次密碼驗證

如果本次密碼不等于上面輸入的密碼則返回錯誤信息

其余同上需求⑦：我同意模塊

添加類.icon-queren2則是默認選中樣式可以使用toggle切換類

需求⑧：表單提交模塊

使用submit提交事件

如果沒有勾選同意協(xié)議，則提示需要勾選

classList.contains()

看看有沒有包含某個類，如果有則返回true，么有則返回false如果上面input表單只要有模塊，返回的是false則阻止提交正則表達式綜合案例階段案例小兔鮮登錄頁面需求：①：tab切換小兔鮮登錄頁面需求②：點擊登錄可以跳轉(zhuǎn)頁面先阻止默認行為如果沒有勾選同意，則提示要勾選required屬性不能為空假設(shè)登錄成功

把用戶名記錄到本地存儲中同時跳轉(zhuǎn)到首頁location.href

小兔鮮首頁頁面需求：從登錄頁面跳轉(zhuǎn)過來之后，自動顯示用戶名如果點擊退出，則不顯示用戶名小兔鮮首頁頁面步驟：最好寫個渲染函數(shù)，因為一會的退出還需要用到①：如果本地存儲有記錄的用戶名，讀取本地存儲數(shù)據(jù)

需要把用戶名寫到第一個li里面格式：<ahref="javascript:;"><iclass="iconfonticon-user">pink老師</i></a>因為登錄了，所以第二個里面的文字變?yōu)?，退出登?/p>

格式：<ahref="javascript:;">退出登錄</a>②：如