一. 正則表達(dá)式
正則表達(dá)式：其實(shí)就是一種匹配規(guī)則控淡，用于檢索字符串
定義正則表達(dá)式的兩種方式：1.直接定義 2.構(gòu)造函數(shù)定義
那么正則表達(dá)式正則強(qiáng)大的地方是它可以寫(xiě) 通配符(擁有特殊含義的字符)
二.?通配符
\w 表示：字母、數(shù)字止潘、下劃線
\W 表示：除了字母掺炭、數(shù)字、下劃線以外的字符
\d 表示：數(shù)字
\D 表示：非數(shù)字
^ 表示：以^符號(hào)后面的第一個(gè)字符開(kāi)頭
表示：以表示：以符號(hào)前面的第一個(gè)字符結(jié)尾
{n} 表示：重復(fù)n次
{n,m} 表示：重復(fù)n到m次
[xyz] 表示：其中任意一個(gè)字符
+ 表示：重復(fù)前一項(xiàng)1次或多次 等價(jià)于 {1,}
* 表示：重復(fù)前一項(xiàng)0次或多次 等價(jià)于 {0,}
? 表示：重復(fù)前一項(xiàng)0次或1次 等價(jià)于 {0,1}
. 表示：除了換行符以外的任意一個(gè)字符
\. 表示：.字符 ^ 表示：^ \表示：表示：
可以用()將多個(gè)字符作為一個(gè)整體
\w 等價(jià)于 [0-9a-zA-Z_]
| 表示：或者
[\u4E00-\u9FA5] 是常用漢字的unicode編碼范圍
三. 正則練習(xí)
四. 正則表達(dá)式配合字符串的方法
replace()方法
默認(rèn)情況下凭戴，replace()方法涧狮，只會(huì)替換字符串中匹配的第一段內(nèi)容
使用正則表達(dá)式，添加全局匹配修飾符g么夫，可以替換匹配全部?jī)?nèi)容
使用正則表達(dá)式者冤，添加忽略大小寫(xiě)修飾符i，在匹配內(nèi)容時(shí)會(huì)忽略大小寫(xiě)
search()方法
可以通過(guò)正則表達(dá)式查找位置
五. 添加學(xué)生練習(xí)
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>添加學(xué)生</title>
? ? <style>
? ? ? ? .err{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? .ok{
? ? ? ? ? ? color: green;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <form>
? ? ? ? <table>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>姓名：</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <input type="text" id="name">
? ? ? ? ? ? ? ? ? ? <span id="nameMsg"></span>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>年齡：</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <input type="text" id="age">
? ? ? ? ? ? ? ? ? ? <span id="ageMsg"></span>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>性別：</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <input checked name="sex" type="radio" value="0">男
? ? ? ? ? ? ? ? ? ? <input name="sex" type="radio" value="1">女
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>愛(ài)好：</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <input name="hobby" type="checkbox" value="抽煙">抽煙
? ? ? ? ? ? ? ? ? ? <input name="hobby" type="checkbox" value="喝酒">喝酒
? ? ? ? ? ? ? ? ? ? <input name="hobby" type="checkbox" value="燙頭">燙頭
? ? ? ? ? ? ? ? ? ? <input name="hobby" type="checkbox" value="睡覺(jué)">睡覺(jué)
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>年級(jí)：</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <select id="grade">
? ? ? ? ? ? ? ? ? ? ? ? <option value="0">請(qǐng)選擇</option>
? ? ? ? ? ? ? ? ? ? ? ? <option value="1">大一</option>
? ? ? ? ? ? ? ? ? ? ? ? <option value="2">大二</option>
? ? ? ? ? ? ? ? ? ? ? ? <option value="3">大三</option>
? ? ? ? ? ? ? ? ? ? ? ? <option value="4">大四</option>
? ? ? ? ? ? ? ? ? ? </select>
? ? ? ? ? ? ? ? ? ? <span id="gradeMsg">必須要選擇一個(gè)年級(jí)</span>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>郵箱：</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <input type="text" id="email">
? ? ? ? ? ? ? ? ? ? <span id="emailMsg">請(qǐng)輸入正確的郵箱格式</span>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>電話：</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <input type="text" id="phone">
? ? ? ? ? ? ? ? ? ? <span id="phoneMsg">請(qǐng)輸入正確的電話格式</span>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>生日：</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <input type="text" id="bornDate">
? ? ? ? ? ? ? ? ? ? <span id="bornDateMsg">請(qǐng)輸入正確日期格式</span>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td></td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <button type="submit">提交</button>
? ? ? ? ? ? ? ? ? ? <button type="reset">重置</button>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? </table>
? ? </form>
? ? <script>
? ? ? ? //獲取姓名文本框
? ? ? ? let name = document.querySelector('#name')
? ? ? ? //獲取年齡文本框
? ? ? ? let age = document.querySelector('#age')
? ? ? ? //表單的提交事件
? ? ? ? document.querySelector('form').onsubmit = function(){
? ? ? ? ? ? // 返回true提交表單档痪，返回false不提交表單
? ? ? ? ? ? if(checkName() & checkAge()){
? ? ? ? ? ? ? ? return true
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? return false
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //姓名文本框失去焦點(diǎn)
? ? ? ? name.onblur = checkName
? ? ? ? //驗(yàn)證姓名
? ? ? ? function checkName(){
? ? ? ? ? ? //定義驗(yàn)證姓名的正則
? ? ? ? ? ? let reg = /^[\u4E00-\u9FA5]{2,4}$/
? ? ? ? ? ? // 調(diào)用驗(yàn)證方法
? ? ? ? ? ? return checkInput("#nameMsg",name,reg,'姓名正確','姓名必須是2-4位漢字')
? ? ? ? }
? ? ? ? //年齡文本框失去焦點(diǎn)
? ? ? ? age.onblur = checkAge
? ? ? ? //驗(yàn)證年齡
? ? ? ? function checkAge(){
? ? ? ? ? ? //定義驗(yàn)證年齡的正則
? ? ? ? ? ? let reg = /^\d{1,2}$|^1([0-1]\d)|20$/
? ? ? ? ? ? // 調(diào)用驗(yàn)證方法
? ? ? ? ? ? return checkInput("#ageMsg",age,reg,'年齡正確','年齡必須是0-120之間')
? ? ? ? }
? ? ? ? //驗(yàn)證方法譬嚣，參數(shù)分別是：span元素Id，表單元素對(duì)象钞它，正則規(guī)則拜银，驗(yàn)證成功消息，驗(yàn)證失敗消息
? ? ? ? function checkInput(spanId,_this,reg,okMsg,errMsg){
? ? ? ? ? ? // 獲取消息span
? ? ? ? ? ? let span = document.querySelector(spanId)
? ? ? ? ? ? //獲取信息
? ? ? ? ? ? let val = _this.value
? ? ? ? ? ? if(!reg.test(val)){
? ? ? ? ? ? ? ? span.className="err"
? ? ? ? ? ? ? ? span.innerHTML = errMsg
? ? ? ? ? ? ? ? return false ?//驗(yàn)證失敗返回false
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? span.className="ok"
? ? ? ? ? ? ? ? span.innerHTML = okMsg
? ? ? ? ? ? ? ? return true ?//驗(yàn)證成功返回true
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
