正則——RegExp
●正則也叫正則表達(dá)式，又名 “規(guī)則表達(dá)式”
●正則是JS中的數(shù)據(jù)類(lèi)型, 是一個(gè)復(fù)雜數(shù)據(jù)類(lèi)型
●由我們自己來(lái)書(shū)寫(xiě) “規(guī)則”，專(zhuān)門(mén)用來(lái)檢測(cè) 字符串 是否符合 “規(guī)則” 使用的
●我們使用一些特殊的字符或者符號(hào)定義一個(gè) “規(guī)則公式”，然后用我們定義好的 “規(guī)則公式” 去檢測(cè)字符串是不是合格
var reg = /\d+/
var str1 = '123'
var str2 = 'abc'
console.log(reg.test(str1)) // true
console.log(reg.test(str2)) // false
●上面的變量 reg 就是定制好的規(guī)則
●檢測(cè) str1 這個(gè)字符串的時(shí)候，符合規(guī)則
●檢測(cè) str2 這個(gè)字符串的時(shí)候，不符合規(guī)則
創(chuàng)建一個(gè)正則表達(dá)式
●想制定 “規(guī)則”，必須要按照人家要求的方式來(lái)制定
●把一些字母和符號(hào)寫(xiě)在 // 中間的東西，叫做正則表達(dá)式，比如 /abcdefg/
●創(chuàng)建正則表達(dá)式有兩個(gè)方式 字面量 和 構(gòu)造函數(shù)創(chuàng)建
字面量創(chuàng)建
// 下面就是字面量創(chuàng)建一個(gè)正則表達(dá)式
var reg = /abcdefg/
●這個(gè)正則表達(dá)式就可以去檢測(cè)字符串了
●這個(gè)正則表達(dá)式的意義是字符串中的必須要包含'abcdefg'這個(gè)片段
構(gòu)造函數(shù)創(chuàng)建
// 下面就是構(gòu)造函數(shù)創(chuàng)建一個(gè)正則表達(dá)式
var reg = new RegExp('abcdefg')
console.log(reg) // /abcdefg/
●使用構(gòu)造函數(shù)方式創(chuàng)建的和字面量創(chuàng)建的，得到的結(jié)果一樣
兩種創(chuàng)建方式的區(qū)別
●語(yǔ)法不一樣
●書(shū)寫(xiě)標(biāo)識(shí)符的時(shí)候
○字面量方式直接書(shū)寫(xiě)在正則的后面
○內(nèi)置構(gòu)造函數(shù), 以第二個(gè)參數(shù)的方式傳遞
●拼接字符串
○字面量方式不接受拼接字符串
○內(nèi)置構(gòu)造函數(shù)方式, 可以拼接字符串
●基本元字符書(shū)寫(xiě)
○字面量方式的時(shí)候, 直接書(shū)寫(xiě) \s\d\w
○內(nèi)置構(gòu)造函數(shù)書(shū)寫(xiě)的時(shí)候, 需要書(shū)寫(xiě) \s\d\w
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script>
//書(shū)寫(xiě)標(biāo)識(shí)符的區(qū)別
var reg = /abcd/gi
console.log(reg)
var reg2 = new RegExp('abcd', 'gi')
console.log(reg2)
// 拼接字符串的區(qū)別
var s = 'HH'
var s2 = 'MM'
// 不能解析變量
var reg = /(s|s2)/ //會(huì)報(bào)錯(cuò) 不能解析變量
// var reg = /(HH|MM)/
console.log(reg)
// 因?yàn)榈谝粋€(gè)參數(shù)就是需要你以 字符串 的形式傳遞 所以可以拼接字符串
var reg2 = new RegExp('(' + s + '|' + s2 + ')')
console.log(reg2)
// 基本元字符的書(shū)寫(xiě)的區(qū)別
var reg = /\s\d\w/
console.log(reg)
var reg2 = new RegExp('\\s\\d\\w')
console.log(reg2)
</script>
</body>
</html>
正則表達(dá)式的方法
●正則提供了一些方法給我們使用
●用來(lái)檢測(cè)和捕獲字符串中的內(nèi)容的
test()方法——匹配
●作用：test方法是用來(lái)檢測(cè)字符串是否符合我們正則的標(biāo)準(zhǔn)
●語(yǔ)法： 正則.test(字符串)
●返回值： boolean
○如果該字符串符合正則的規(guī)則, 那么就是 true
○如果該字符串不符合正則的規(guī)則, 那么就是 false
console.log(/\d+/.test('123')) // true
console.log(/\d+/.test('abc')) // false
exec()方法——捕獲
●作用：exec方法是把字符串中滿(mǎn)足條件的內(nèi)容捕獲出來(lái)
●語(yǔ)法： 正則.exec(字符串)
●返回值： 把字符串中符合正則要求的第一項(xiàng)以及一些其他信息，以數(shù)組的形式返回
○原始字符串中沒(méi)有符合正則要求的字符串片段
■null
○原始字符串中有符合正則要求的片段
■正則沒(méi)有 () 也沒(méi)有 全局標(biāo)識(shí)符g
●返回值是一個(gè)數(shù)組
●索引 0 是從字符串中捕獲出來(lái)的滿(mǎn)足正則條件的第一個(gè)內(nèi)容
●注意: 不管捕獲多少次, 每次都是從原始字符串的索引 0 開(kāi)始檢索
■正則有全局標(biāo)識(shí)符 g
●返回值是一個(gè)數(shù)組
●索引 0 是從字符串中捕獲出來(lái)的滿(mǎn)足正則條件的第一個(gè)內(nèi)容
●注意: 第二次捕獲是從第一次的結(jié)束位置開(kāi)始向后查詢(xún), 直到最后捕獲不到為止, 再下一次的時(shí)候, 又從字符串的 索引0 開(kāi)始檢索
■有 ()
●返回的是一個(gè)數(shù)組
●索引 0 是從字符串中捕獲出來(lái)的滿(mǎn)足正則條件的第一個(gè)內(nèi)容
●從索引 1 開(kāi)始, 依次是每一個(gè)小括號(hào)的單獨(dú)內(nèi)容
●注意: 按照小括號(hào)的開(kāi)始標(biāo)志, 來(lái)數(shù)是第幾個(gè)小括號(hào)
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script>
//1. 沒(méi)有符合要求的片段
var str = 'vgfdrtyuijkhvgfrtyu'
var reg = /\d{3}/
var res = reg.exec(str)
console.log(res)
//2. 有符合要求的片段
//2-1. 沒(méi)有 () 沒(méi)有 g
var str = 'tfyu123gvh456gfh789gyhj'
var reg = /\d{3}/
var res = reg.exec(str)
console.log(res)
//2-2. 有全局標(biāo)識(shí)符 g
var str = 'tfyu123gvh456gfh789gyhj'
var reg = /\d{3}/g
var res = reg.exec(str)
console.log(res)
console.log(reg.exec(str))
console.log(reg.exec(str))
console.log(reg.exec(str))
console.log(reg.exec(str))
//2-3. 有 ()
var str = '11010820030223001x'
var reg = /(\d{2})(\d{2})(\d{2})((\d{4})(\d{2})(\d{2}))\d{2}(\d)(?:\d|x)/
var res = reg.exec(str)
console.log(res)
</script>
</body>
</html>
●擴(kuò)展: () 有兩個(gè)意義
○一個(gè)整體
○單獨(dú)捕獲
○如果你想只使用一個(gè)意義, 整體的所用, 不想在捕獲的時(shí)候單獨(dú)捕獲出來(lái)
○你可以寫(xiě)成 (?:)表示匹配但不捕獲
// 單獨(dú)捕獲
var reg = /(\d{2})(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|x)/
var res = reg.exec('13072220041010301x')
console.log(res);
正則表達(dá)式里面的符號(hào)
●知道了怎么創(chuàng)建一個(gè)正則表達(dá)式以后，我們就來(lái)詳細(xì)的說(shuō)一下正則表達(dá)式里面涉及到的一些符號(hào)了
元字符
基本元字符
●. ： 匹配非換行的任意字符 表示字符串中至少要有一個(gè)非換行的內(nèi)容
●\ ： 轉(zhuǎn)譯符號(hào)，把有意義的 符號(hào) 轉(zhuǎn)換成沒(méi)有意義的 字符，把沒(méi)有意義的 字符 轉(zhuǎn)換成有意義的 符號(hào)
●\s ： 匹配空白字符(空格/縮進(jìn)/制表符/...)表示字符串中至少包含一位 空白 內(nèi)容
●\S ： 匹配非空白字符
●\d ： 匹配數(shù)字 表示字符串中至少包含一位 數(shù)字(0-9)
●\D ： 匹配非數(shù)字 表示字符串中至少包含一位 非數(shù)字 內(nèi)容
●\w ： 匹配數(shù)字字母下劃線(xiàn) 表示 一位 數(shù)字(0-9)字母(a-zA-Z)下劃線(xiàn)(_) 中的任意一個(gè)
●\W ： 匹配非數(shù)字字母下劃線(xiàn) 表示 一位 非數(shù)字字母下劃線(xiàn) 中的任意一個(gè)
●有了元字符我們就可以簡(jiǎn)單的制定一些規(guī)則了
// 基本元字符
// \d
// 表示驗(yàn)證的字符串內(nèi)必須包含一位數(shù)字
var reg = /\d/
console.log(reg.test('sfdgdfgfdhfgh'));
console.log(reg.test('sfdgdfgfg4dhfgh7'));
console.log(reg.test('123sfdgdfgfg4dhfgh7'));
// \D
// 表示驗(yàn)證的字符串中必須包含一位非數(shù)字
var reg = /\D/
console.log(reg.test('45613165465'));
console.log(reg.test('45613 165465'));
console.log(reg.test('45613d165465'));
console.log(reg.test('45613%165465'));
// \s
// 表示驗(yàn)證的字符串中必須要包含一位空白內(nèi)容
var reg = /\s/
console.log(reg.test('sgsdfhfgh'));
console.log(reg.test('sgsdf hfgh'));
console.log(reg.test('sgsdf hfgh'));
console.log(reg.test(`sdgs
dfg`));
// \S
// 表示驗(yàn)證的字符串中必須要包含一位非空白內(nèi)容
var reg = /\S/
console.log(reg.test(' '));
console.log(reg.test(' d '));
console.log(reg.test(' # '));
console.log(reg.test(' . '));
// \w
// 表示驗(yàn)證的字符船串中必須要包含一位數(shù)字字母和下劃線(xiàn)
var reg = /\w/
console.log(reg.test('@#%#$%&^*&(*'));
console.log(reg.test('@#%#$%&^2*&(*'));
console.log(reg.test('@#%#$%&^b*&(*'));
console.log(reg.test('@#%#$%&^_*&(*'));
// \W
// 表示驗(yàn)證的字符串中必須要包含一位非數(shù)字字母和下劃線(xiàn)
var reg = /\W/
console.log(reg.test('asgd353454__'));
console.log(reg.test('asgd353 454__'));
console.log(reg.test('asgd353$454__'));
// .
// 表示驗(yàn)證的字符串中必須要包含一位非換行以外的內(nèi)容
var reg = /./
console.log(reg.test('\n'));
console.log(reg.test('\ns'));
console.log(reg.test('\n '));
console.log(reg.test('\n@'));
// \
// 表示把有意義的點(diǎn)轉(zhuǎn)成了沒(méi)有意義的點(diǎn)
var reg = /\d\.\d/
console.log(reg.test('1.5'));
console.log(reg.test('1#5'));
限定符
注意: 一個(gè)限定符只能修飾符號(hào)前面的一個(gè)內(nèi)容的出現(xiàn)次數(shù)
●* ： 前一個(gè)內(nèi)容重復(fù)至少 0 次，也就是可以出現(xiàn) 0 ～ 正無(wú)窮 次
●+ ： 前一個(gè)內(nèi)容重復(fù)至少 1 次，也就是可以出現(xiàn) 1 ～ 正無(wú)窮 次
●? ： 前一個(gè)內(nèi)容重復(fù) 0 或者 1 次，也就是可以出現(xiàn) 0 ～ 1 次
●{n} ： 前一個(gè)內(nèi)容重復(fù) n 次，也就是必須出現(xiàn) n 次
●{n,} ： 前一個(gè)內(nèi)容至少出現(xiàn) n 次，也就是出現(xiàn) n ～ 正無(wú)窮 次
●{n,m} ： 前一個(gè)內(nèi)容至少出現(xiàn) n 次至多出現(xiàn) m 次，也就是出現(xiàn) n ～ m 次
●限定符是配合元字符使用的
// 下面正則表示驗(yàn)證數(shù)字出現(xiàn) 0 ～ 正無(wú)窮次都可以
var reg = /\d*/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // true
// 下面正則表示驗(yàn)證數(shù)字出現(xiàn) 1 ～ 正無(wú)窮次都可以
var reg = /\d+/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // true
// 下面正則表示驗(yàn)證數(shù)字出現(xiàn) 0 ~ 1 次都可以
var reg = /\d?/
var str = 'abc'
var str2 = 'abc1'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // true
// 下面正則表示驗(yàn)證數(shù)字必須出現(xiàn) 3 次
var reg = /\d{3}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
// 下面正則表示驗(yàn)證數(shù)字出現(xiàn) 3 ～ 正無(wú)窮次
var reg = /\d{3,}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abcd1234567'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
console.log(reg.test(str4)) // true
// 下面正則表示驗(yàn)證數(shù)字只能出現(xiàn) 3 ～ 5 次
var reg = /\d{3,5}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abc12345'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
console.log(reg.test(str4)) // true
邊界符
●^ ： 表示開(kāi)頭
●$ ： 表示結(jié)尾
●邊界符是限定字符串的開(kāi)始和結(jié)束的
// 下面表示從開(kāi)頭到結(jié)尾只能有數(shù)字，并且出現(xiàn) 3 ～ 5 次
var reg = /^\d{3,5}$/
var str = 'abc'
var str2 = 'abc123'
var str3 = '1'
var str4 = '1234567'
var str5 = '123'
var str6 = '12345'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // false
console.log(reg.test(str4)) // false
console.log(reg.test(str5)) // true
console.log(reg.test(str6)) // true
特殊符號(hào)
●() ： 限定一組元素
●[] ： 字符集合，表示寫(xiě)在 [] 里面的任意一個(gè)都行
●[^] ： 反字符集合，表示寫(xiě)在 [^] 里面之外的任意一個(gè)都行
●- ： 范圍，比如 a-z 表示從字母 a 到字母 z 都可以
●| ： 或，正則里面的或 a|b 表示字母 a 或者 b 都可以
●現(xiàn)在我們就可以把若干符號(hào)組合在一起使用了
// ()
var reg = /^(abc){2}$/
console.log(reg.test('abcabc'));
console.log(reg.test('aabbcc'));
console.log(reg.test('abcc'));
// |
var reg = /^abc|def$/
console.log(reg.test('abcabc'));
console.log(reg.test('abc'));
console.log(reg.test('def'));
console.log(reg.test('abcdef'));
console.log(reg.test('defdef'));
console.log(reg.test('sddhdggfhdgsf'));
var reg = /^(abc|def)$/
console.log(reg.test('abcabc'));
console.log(reg.test('abcdef'));
console.log(reg.test('defdef'));
console.log(reg.test('abcsddhdggfhdgsf'));
console.log(reg.test('sddhdggfhdgsdef'));
console.log(reg.test('abc'));
console.log(reg.test('def'));
// []
var reg = /^[abcd]$/
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('e'));
// [^]
var reg = /^[^abcd]$/
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('e'));
// -
var reg = /^[0-9]$/
console.log(reg.test('01'));
console.log(reg.test('1'));
console.log(reg.test('2'));
console.log(reg.test('3'));
console.log(reg.test('4'));
console.log(reg.test('5'));
console.log(reg.test('6'));
console.log(reg.test('7'));
console.log(reg.test('8'));
console.log(reg.test('9'));
標(biāo)識(shí)符(修飾符)
●書(shū)寫(xiě)在正則表達(dá)式的外面, 專(zhuān)門(mén)用來(lái)修飾整個(gè)正則表達(dá)式的符號(hào)
●i ：ignore的簡(jiǎn)寫(xiě) 表示忽略大小寫(xiě)
○這個(gè) i 是寫(xiě)在正則的最后面的
○/\w/i
○就是在正則匹配的時(shí)候不去區(qū)分大小寫(xiě)
●g ： global的簡(jiǎn)寫(xiě) 表示全局匹配
○這個(gè) g 是寫(xiě)在正則的最后面的
○/\w/g
○就是全局匹配字母數(shù)字下劃線(xiàn)
var reg = /^[a-z]$/i
console.log(reg.test('s'));
console.log(reg.test('g'));
console.log(reg.test('y'));
console.log(reg.test('u'));
console.log(reg.test('A'));
// 有全局修飾符 g
var str = 'sda123fdhm456fnbvb789gdghj345khmgn666bxcvxb'
var reg = /\d{3}/g
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
字符串和正則合用的方法
●字符串中有一些方法也是可以和正則一起使用的
search
●作用：search 是查找字符串中是否有滿(mǎn)足正則條件的內(nèi)容
●語(yǔ)法：
○字符串.search(正則)
○字符串.search(字符串片段)
●返回值 ： 有的話(huà)返回開(kāi)始索引，沒(méi)有返回 -1
var reg = /\d{3}/
var str = 'hello123'
var str2 = 'hello'
console.log(str.search(reg)) // 5
console.log(str2.search(reg)) // -1
match
●作用：match 找到字符串中符合正則條件的內(nèi)容返回
●語(yǔ)法：
○字符串.match(正則)
○字符串.match(字符串片段)
●返回值 ：
○沒(méi)有標(biāo)示符 g 的時(shí)候，是和 exec 方法一樣
○有標(biāo)示符 g 的時(shí)候，是返回一個(gè)數(shù)組，里面是匹配到的每一項(xiàng)
var reg = /\d{3}/
var str = 'hello123world456'
var str2 = 'hello'
console.log(str.match(reg))
// ["123", index: 5, input: "hello123wor456", groups: undefined]
console.log(str2.match(reg)) // null
var reg = /\d{3}/g
var str = 'hello123world456'
var str2 = 'hello'
console.log(str.match(reg))
// ["123", "456"]
console.log(str2.match(reg)) // null
replace
●作用：replace 是將字符串中滿(mǎn)足正則條件的字符串替換掉
●語(yǔ)法：
○字符串.replace('換下字符', '換上字符')
○字符串.replace(正則表達(dá)式, '換上字符')
●返回值 ： 替換后的字符串
○當(dāng)你的第一個(gè)參數(shù)傳遞字符串的時(shí)候, 只能替換一個(gè)
○當(dāng)你的第一個(gè)參數(shù)傳遞正則表達(dá)式的時(shí)候, 只能替換一個(gè)
○但是如果你的正則表達(dá)式有全局標(biāo)識(shí)符 g, 那么有多少替換多少
<script>
var str = 'fctyHHguHHijHHknHHjgHHhfMMctMMdrMMf'
console.log(str) //fctyHHguHHijHHknHHjgHHhfMMctMMdrMMf
var r1 = str.replace('HH', '**')
console.log(r1) //fcty**guHHijHHknHHjgHHhfMMctMMdrMMf
var r2 = str.replace(/HH/, '**')
console.log(r2) //fcty**guHHijHHknHHjgHHhfMMctMMdrMMf
var r3 = str.replace(/HH/g, '**')
console.log(r3) //fcty**gu**ij**kn**jg**hfMMctMMdrMMf
</script>
案例——密碼強(qiáng)度校驗(yàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 200px;
border: 10px solid pink;
margin: 20px auto;
padding: 20px;
}
input {
width: 100%;
height: 50px;
font-size: 24px;
padding-left: 20px;
box-sizing: border-box;
}
p {
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
margin-top: 20px;
}
p>span {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
color: #fff;
font-size: 24px;
}
p>span:nth-child(1).active {
background-color: red;
}
p>span:nth-child(2).active {
background-color: orange;
}
p>span:nth-child(3).active {
background-color: green;
}
</style>
</head>
<body>
<div>
<input type="text">
<p>
<span>弱</span>
<span>中</span>
<span>強(qiáng)</span>
</p>
</div>
<script>
// 密碼強(qiáng)度校驗(yàn)
// + 規(guī)則:
// => 密碼的規(guī)則: 數(shù)字 字母 符號(hào)(@#%&)
// => 強(qiáng)度的規(guī)則:
// -> 弱: 有一類(lèi)
// -> 中: 有兩類(lèi)
// -> 強(qiáng): 全包含
// 獲取元素
var inp = document.querySelector('input')
var spans = document.querySelectorAll('span')
// 準(zhǔn)備正則
// 只要包含一位數(shù)字就可以
var r1 = /\d/
// 只要包含一位字母就可以
var r2 = /[a-z]/i
// 只要包含一位符號(hào)就可以
var r3 = /[@#%&]/
// 1. 給 inp 綁定 input 事件
// 隨著輸入或者刪除內(nèi)容實(shí)時(shí)觸發(fā)
inp.oninput = function() {
// 2. 拿到 inp 內(nèi)輸入的內(nèi)容
var text = inp.value
// 3. 準(zhǔn)備一個(gè)表示級(jí)別的變量, 默認(rèn)是 0
var level = 0
// 3-1. 依次使用正則校驗(yàn)
if (r1.test(text)) level++
if (r2.test(text)) level++
if (r3.test(text)) level++
// 在每一次添加類(lèi)型之前, 給所有 span 清除掉類(lèi)名
for (var i = 0; i < spans.length; i++) {
spans[i].classList.remove('active')
if (i < level) spans[i].classList.add('active')
}
}
</script>
</body>
</html>
案例——表單驗(yàn)證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
form {
width: 400px;
border: 10px solid pink;
padding: 20px;
}
label {
display: block;
height: 80px;
position: relative;
}
input {
height: 30px;
font-size: 24px;
padding-left: 20px;
}
label>span {
position: absolute;
left: 0;
top: 35px;
font-size: 20px;
color: red;
display: none;
}
</style>
</head>
<body>
<form>
<label>
用戶(hù)名: <input class="username" type="text">
<span>請(qǐng)按照規(guī)則填寫(xiě)用戶(hù)名</span>
</label>
<label>
密碼: <input class="password" type="text">
<span>請(qǐng)按照規(guī)則填寫(xiě)密碼</span>
</label>
<label>
手機(jī)號(hào): <input class="phone" type="text">
<span>請(qǐng)按照規(guī)則填寫(xiě)手機(jī)號(hào)</span>
</label>
<label>
郵箱: <input class="email" type="text">
<span>請(qǐng)按照規(guī)則填寫(xiě)郵箱</span>
</label>
<input type="button" value="完善資料">
</form>
<script>
// 方案2: 統(tǒng)一驗(yàn)證
// 1. 給每一個(gè) input 起一個(gè)單獨(dú)的類(lèi)名(或者標(biāo)識(shí), 用來(lái)區(qū)分)
// 2. 準(zhǔn)備正則, 以對(duì)象的形式準(zhǔn)備正則, 對(duì)象的 鍵就使用 文本框的獨(dú)立標(biāo)識(shí), 值就使用 正則
// 當(dāng)你的文本框 className === 'username' 的時(shí)候, 就使用 regObj 內(nèi)的一個(gè)叫做 username 對(duì)應(yīng)的正則去驗(yàn)證
var regObj = {
username: /^[0-9a-z]\w{5,11}$/i,
password: /^\w{6,12}$/,
phone: /^\d{11}$/,
email: /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/
}
// 3. 獲取到所有的文本框
var inps = document.querySelectorAll('form input')
// 3-2. 給每一個(gè) input 綁定 表單輸入 事件
inps.forEach(function(item) {
item.oninput = function() {
// 4-1. 拿到你正在輸入的這個(gè) input 文本框內(nèi)的文本
var text = item.value
// 4-2. 拿到驗(yàn)證該文本框需要使用的正則
var reg = regObj[item.className]
// 4-3. 拿到應(yīng)該顯示的那個(gè)對(duì)應(yīng)的 span 標(biāo)簽
var span = item.nextElementSibling
// 4-4. 操作顯示和隱藏
span.style.display = reg.test(text) ? 'none' : 'block'
// if (reg.test(text)) {
// span.style.display = 'none'
// } else {
// span.style.display = 'block'
// }
}
})
</script>
</body>
</html>
正則預(yù)查(擴(kuò)展)
正向預(yù)查
●正向肯定預(yù)查:(?=)
●正向否定預(yù)查:(?!)
負(fù)向預(yù)查
●負(fù)向肯定預(yù)查:(?<=)
●負(fù)向否定預(yù)查:(?<!)
var str = 'windows2012windows2000windowsXPwindowsVistawindows98windows'
// 1. 正向肯定預(yù)查
// 需求: 我需要的是 windows, 但是是后面帶有數(shù)字的 widnows
// var reg = /windows(?=\d+)/g
// 2. 正向否定預(yù)查
// 需求: 我需要的是 windows, 但是后面不是數(shù)字的 windows
// var reg = /windows(?!\d+)/g
// 3. 負(fù)向肯定預(yù)查
// 需求: 我需要的是 windows, 但是前面是數(shù)字的 windows
var reg = /(?<=\d+)windows/g
// 4. 負(fù)向否定預(yù)查
// 需求: 我需要的是 windows, 但是前面不是數(shù)字的 windows
var reg = /(?<!\d+)windows/g
京公網(wǎng)安備 11010802030320號(hào)