国产睡熟迷奷白丝护士系列精品,中文色字幕网站,免费h网站在线观看的,亚洲开心激情在线

      <sup id="hb9fh"></sup>
          1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

            手機站
            千鋒教育

            千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

            千鋒教育

            掃一掃進(jìn)入千鋒手機站

            領(lǐng)取全套視頻
            千鋒教育

            關(guān)注千鋒學(xué)習(xí)站小程序
            隨時隨地免費學(xué)習(xí)課程

            當(dāng)前位置:首頁  >  行業(yè)資訊  > JavaScript全解析——正則表達(dá)式

            JavaScript全解析——正則表達(dá)式

            來源:千鋒教育
            發(fā)布人:zyh
            時間: 2023-06-01 15:46:00 1685605560

              正則——RegExp

              ●正則也叫正則表達(dá)式,又名 “規(guī)則表達(dá)式”

              ●正則是JS中的數(shù)據(jù)類型, 是一個復(fù)雜數(shù)據(jù)類型

              ●由我們自己來書寫 “規(guī)則”,專門用來檢測 字符串 是否符合 “規(guī)則” 使用的

              ●我們使用一些特殊的字符或者符號定義一個 “規(guī)則公式”,然后用我們定義好的 “規(guī)則公式” 去檢測字符串是不是合格  

            var reg = /\d+/
            var str1 = '123'
            var str2 = 'abc'
            console.log(reg.test(str1)) // true
            console.log(reg.test(str2)) // false

              ●上面的變量 reg 就是定制好的規(guī)則

              ●檢測 str1 這個字符串的時候,符合規(guī)則

              ●檢測 str2 這個字符串的時候,不符合規(guī)則

              創(chuàng)建一個正則表達(dá)式

              ●想制定 “規(guī)則”,必須要按照人家要求的方式來制定

              ●把一些字母和符號寫在 // 中間的東西,叫做正則表達(dá)式,比如 /abcdefg/

              ●創(chuàng)建正則表達(dá)式有兩個方式 字面量 和 構(gòu)造函數(shù)創(chuàng)建

              字面量創(chuàng)建  

            // 下面就是字面量創(chuàng)建一個正則表達(dá)式
            var reg = /abcdefg/

              ●這個正則表達(dá)式就可以去檢測字符串了

              ●這個正則表達(dá)式的意義是字符串中的必須要包含'abcdefg'這個片段

              構(gòu)造函數(shù)創(chuàng)建 

            // 下面就是構(gòu)造函數(shù)創(chuàng)建一個正則表達(dá)式
            var reg = new RegExp('abcdefg')
            console.log(reg) // /abcdefg/

              ●使用構(gòu)造函數(shù)方式創(chuàng)建的和字面量創(chuàng)建的,得到的結(jié)果一樣

              兩種創(chuàng)建方式的區(qū)別

              ●語法不一樣

              ●書寫標(biāo)識符的時候

              ○字面量方式直接書寫在正則的后面

              ○內(nèi)置構(gòu)造函數(shù), 以第二個參數(shù)的方式傳遞

              ●拼接字符串

              ○字面量方式不接受拼接字符串

              ○內(nèi)置構(gòu)造函數(shù)方式, 可以拼接字符串

              ●基本元字符書寫

              ○字面量方式的時候, 直接書寫 \s\d\w

              ○內(nèi)置構(gòu)造函數(shù)書寫的時候, 需要書寫 \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>
            //書寫標(biāo)識符的區(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)/ //會報錯 不能解析變量
            // var reg = /(HH|MM)/
            console.log(reg)
            // 因為第一個參數(shù)就是需要你以 字符串 的形式傳遞 所以可以拼接字符串
            var reg2 = new RegExp('(' + s + '|' + s2 + ')')
            console.log(reg2)


            // 基本元字符的書寫的區(qū)別
            var reg = /\s\d\w/
            console.log(reg)

            var reg2 = new RegExp('\\s\\d\\w')
            console.log(reg2)
            </script>
            </body>

            </html>

              正則表達(dá)式的方法

              ●正則提供了一些方法給我們使用

              ●用來檢測和捕獲字符串中的內(nèi)容的

              test()方法——匹配

              ●作用:test方法是用來檢測字符串是否符合我們正則的標(biāo)準(zhǔn)

              ●語法: 正則.test(字符串)

              ●返回值: boolean

              ○如果該字符串符合正則的規(guī)則, 那么就是 true

              ○如果該字符串不符合正則的規(guī)則, 那么就是 false 

            console.log(/\d+/.test('123')) // true
            console.log(/\d+/.test('abc')) // false

              exec()方法——捕獲

              ●作用:exec方法是把字符串中滿足條件的內(nèi)容捕獲出來

              ●語法: 正則.exec(字符串)

              ●返回值: 把字符串中符合正則要求的第一項以及一些其他信息,以數(shù)組的形式返回

              ○原始字符串中沒有符合正則要求的字符串片段

              ■null

              ○原始字符串中有符合正則要求的片段

              ■正則沒有 () 也沒有 全局標(biāo)識符g

              ●返回值是一個數(shù)組

              ●索引 0 是從字符串中捕獲出來的滿足正則條件的第一個內(nèi)容

              ●注意: 不管捕獲多少次, 每次都是從原始字符串的索引 0 開始檢索

              ■正則有全局標(biāo)識符 g

              ●返回值是一個數(shù)組

              ●索引 0 是從字符串中捕獲出來的滿足正則條件的第一個內(nèi)容

              ●注意: 第二次捕獲是從第一次的結(jié)束位置開始向后查詢, 直到最后捕獲不到為止, 再下一次的時候, 又從字符串的 索引0 開始檢索

              ■有 ()

              ●返回的是一個數(shù)組

              ●索引 0 是從字符串中捕獲出來的滿足正則條件的第一個內(nèi)容

              ●從索引 1 開始, 依次是每一個小括號的單獨內(nèi)容

              ●注意: 按照小括號的開始標(biāo)志, 來數(shù)是第幾個小括號

            <!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. 沒有符合要求的片段
            var str = 'vgfdrtyuijkhvgfrtyu'
            var reg = /\d{3}/
            var res = reg.exec(str)
            console.log(res)


            //2. 有符合要求的片段
            //2-1. 沒有 () 沒有 g
            var str = 'tfyu123gvh456gfh789gyhj'
            var reg = /\d{3}/
            var res = reg.exec(str)
            console.log(res)

            //2-2. 有全局標(biāo)識符 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>

              ●擴展: () 有兩個意義

              ○一個整體

              ○單獨捕獲

              ○如果你想只使用一個意義, 整體的所用, 不想在捕獲的時候單獨捕獲出來

              ○你可以寫成 (?:)表示匹配但不捕獲 

            // 單獨捕獲
            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á)式里面的符號

              ●知道了怎么創(chuàng)建一個正則表達(dá)式以后,我們就來詳細(xì)的說一下正則表達(dá)式里面涉及到的一些符號了

              元字符

              基本元字符

              ●. : 匹配非換行的任意字符 表示字符串中至少要有一個非換行的內(nèi)容

              ●\ : 轉(zhuǎn)譯符號,把有意義的 符號 轉(zhuǎn)換成沒有意義的 字符,把沒有意義的 字符 轉(zhuǎn)換成有意義的 符號

              ●\s : 匹配空白字符(空格/縮進(jìn)/制表符/...)表示字符串中至少包含一位 空白 內(nèi)容

              ●\S : 匹配非空白字符

              ●\d : 匹配數(shù)字 表示字符串中至少包含一位 數(shù)字(0-9)

              ●\D : 匹配非數(shù)字 表示字符串中至少包含一位 非數(shù)字 內(nèi)容

              ●\w : 匹配數(shù)字字母下劃線 表示 一位 數(shù)字(0-9)字母(a-zA-Z)下劃線(_) 中的任意一個

              ●\W : 匹配非數(shù)字字母下劃線 表示 一位 非數(shù)字字母下劃線 中的任意一個

              ●有了元字符我們就可以簡單的制定一些規(guī)則了 

            // 基本元字符
            // \d
            // 表示驗證的字符串內(nèi)必須包含一位數(shù)字
            var reg = /\d/
            console.log(reg.test('sfdgdfgfdhfgh'));
            console.log(reg.test('sfdgdfgfg4dhfgh7'));
            console.log(reg.test('123sfdgdfgfg4dhfgh7'));
            // \D
            // 表示驗證的字符串中必須包含一位非數(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
            // 表示驗證的字符串中必須要包含一位空白內(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
            // 表示驗證的字符串中必須要包含一位非空白內(nèi)容
            var reg = /\S/
            console.log(reg.test(' '));
            console.log(reg.test(' d '));
            console.log(reg.test(' # '));
            console.log(reg.test(' . '));
            // \w
            // 表示驗證的字符船串中必須要包含一位數(shù)字字母和下劃線
            var reg = /\w/
            console.log(reg.test('@#%#$%&^*&(*'));
            console.log(reg.test('@#%#$%&^2*&(*'));
            console.log(reg.test('@#%#$%&^b*&(*'));
            console.log(reg.test('@#%#$%&^_*&(*'));
            // \W
            // 表示驗證的字符串中必須要包含一位非數(shù)字字母和下劃線
            var reg = /\W/
            console.log(reg.test('asgd353454__'));
            console.log(reg.test('asgd353 454__'));
            console.log(reg.test('asgd353$454__'));
            // .
            // 表示驗證的字符串中必須要包含一位非換行以外的內(nèi)容
            var reg = /./
            console.log(reg.test('\n'));
            console.log(reg.test('\ns'));
            console.log(reg.test('\n '));
            console.log(reg.test('\n@'));
            // \
            // 表示把有意義的點轉(zhuǎn)成了沒有意義的點
            var reg = /\d\.\d/
            console.log(reg.test('1.5'));
            console.log(reg.test('1#5'));

              限定符

              注意: 一個限定符只能修飾符號前面的一個內(nèi)容的出現(xiàn)次數(shù)

              ●* : 前一個內(nèi)容重復(fù)至少 0 次,也就是可以出現(xiàn) 0 ~ 正無窮 次

              ●+ : 前一個內(nèi)容重復(fù)至少 1 次,也就是可以出現(xiàn) 1 ~ 正無窮 次

              ●? : 前一個內(nèi)容重復(fù) 0 或者 1 次,也就是可以出現(xiàn) 0 ~ 1 次

              ●{n} : 前一個內(nèi)容重復(fù) n 次,也就是必須出現(xiàn) n 次

              ●{n,} : 前一個內(nèi)容至少出現(xiàn) n 次,也就是出現(xiàn) n ~ 正無窮 次

              ●{n,m} : 前一個內(nèi)容至少出現(xiàn) n 次至多出現(xiàn) m 次,也就是出現(xiàn) n ~ m 次

              ●限定符是配合元字符使用的  

            // 下面正則表示驗證數(shù)字出現(xiàn) 0 ~ 正無窮次都可以
            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

            // 下面正則表示驗證數(shù)字出現(xiàn) 1 ~ 正無窮次都可以
            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

            // 下面正則表示驗證數(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

            // 下面正則表示驗證數(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

            // 下面正則表示驗證數(shù)字出現(xiàn) 3 ~ 正無窮次
            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

            // 下面正則表示驗證數(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

              邊界符

              ●^ : 表示開頭

              ●$ : 表示結(jié)尾

              ●邊界符是限定字符串的開始和結(jié)束的 


            // 下面表示從開頭到結(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

              特殊符號

              ●() : 限定一組元素

              ●[] : 字符集合,表示寫在 [] 里面的任意一個都行

              ●[^] : 反字符集合,表示寫在 [^] 里面之外的任意一個都行

              ●- : 范圍,比如 a-z 表示從字母 a 到字母 z 都可以

              ●| : 或,正則里面的或 a|b 表示字母 a 或者 b 都可以

              ●現(xiàn)在我們就可以把若干符號組合在一起使用了  


            // ()
            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)識符(修飾符)

              ●書寫在正則表達(dá)式的外面, 專門用來修飾整個正則表達(dá)式的符號

              ●i :ignore的簡寫 表示忽略大小寫

              ○這個 i 是寫在正則的最后面的

              ○/\w/i

              ○就是在正則匹配的時候不去區(qū)分大小寫

              ●g : global的簡寫 表示全局匹配

              ○這個 g 是寫在正則的最后面的

              ○/\w/g

              ○就是全局匹配字母數(shù)字下劃線  


            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 是查找字符串中是否有滿足正則條件的內(nèi)容

              ●語法:

              ○字符串.search(正則)

              ○字符串.search(字符串片段)

              ●返回值 : 有的話返回開始索引,沒有返回 -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)容返回

              ●語法:

              ○字符串.match(正則)

              ○字符串.match(字符串片段)

              ●返回值 :

              ○沒有標(biāo)示符 g 的時候,是和 exec 方法一樣

              ○有標(biāo)示符 g 的時候,是返回一個數(shù)組,里面是匹配到的每一項  

            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 是將字符串中滿足正則條件的字符串替換掉

              ●語法:

              ○字符串.replace('換下字符', '換上字符')

              ○字符串.replace(正則表達(dá)式, '換上字符')

              ●返回值 : 替換后的字符串

              ○當(dāng)你的第一個參數(shù)傳遞字符串的時候, 只能替換一個

              ○當(dāng)你的第一個參數(shù)傳遞正則表達(dá)式的時候, 只能替換一個

              ○但是如果你的正則表達(dá)式有全局標(biāo)識符 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>

              案例——密碼強度校驗

            <!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></span>
            </p>
            </div>

            <script>

            // 密碼強度校驗
            // + 規(guī)則:
            // => 密碼的規(guī)則: 數(shù)字 字母 符號(@#%&)
            // => 強度的規(guī)則:
            // -> 弱: 有一類
            // -> 中: 有兩類
            // -> 強: 全包含

            // 獲取元素
            var inp = document.querySelector('input')
            var spans = document.querySelectorAll('span')

            // 準(zhǔn)備正則
            // 只要包含一位數(shù)字就可以
            var r1 = /\d/
            // 只要包含一位字母就可以
            var r2 = /[a-z]/i
            // 只要包含一位符號就可以
            var r3 = /[@#%&]/

            // 1. 給 inp 綁定 input 事件
            // 隨著輸入或者刪除內(nèi)容實時觸發(fā)
            inp.oninput = function() {
            // 2. 拿到 inp 內(nèi)輸入的內(nèi)容
            var text = inp.value

            // 3. 準(zhǔn)備一個表示級別的變量, 默認(rèn)是 0
            var level = 0

            // 3-1. 依次使用正則校驗
            if (r1.test(text)) level++
            if (r2.test(text)) level++
            if (r3.test(text)) level++

            // 在每一次添加類型之前, 給所有 span 清除掉類名
            for (var i = 0; i < spans.length; i++) {
            spans[i].classList.remove('active')
            if (i < level) spans[i].classList.add('active')
            }

            }
            </script>
            </body>

            </html>

              案例——表單驗證

            <!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>
            用戶名: <input class="username" type="text">
            <span>請按照規(guī)則填寫用戶名</span>
            </label>
            <label>
            密碼: <input class="password" type="text">
            <span>請按照規(guī)則填寫密碼</span>
            </label>
            <label>
            手機號: <input class="phone" type="text">
            <span>請按照規(guī)則填寫手機號</span>
            </label>
            <label>
            郵箱: <input class="email" type="text">
            <span>請按照規(guī)則填寫郵箱</span>
            </label>
            <input type="button" value="完善資料">
            </form>

            <script>
            // 方案2: 統(tǒng)一驗證
            // 1. 給每一個 input 起一個單獨的類名(或者標(biāo)識, 用來區(qū)分)
            // 2. 準(zhǔn)備正則, 以對象的形式準(zhǔn)備正則, 對象的 鍵就使用 文本框的獨立標(biāo)識, 值就使用 正則
            // 當(dāng)你的文本框 className === 'username' 的時候, 就使用 regObj 內(nèi)的一個叫做 username 對應(yīng)的正則去驗證
            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. 給每一個 input 綁定 表單輸入 事件
            inps.forEach(function(item) {
            item.oninput = function() {
            // 4-1. 拿到你正在輸入的這個 input 文本框內(nèi)的文本
            var text = item.value
            // 4-2. 拿到驗證該文本框需要使用的正則
            var reg = regObj[item.className]
            // 4-3. 拿到應(yīng)該顯示的那個對應(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ù)查(擴展)

              正向預(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

            聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
            10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
            請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
            免費領(lǐng)取
            今日已有369人領(lǐng)取成功
            劉同學(xué) 138****2860 剛剛成功領(lǐng)取
            王同學(xué) 131****2015 剛剛成功領(lǐng)取
            張同學(xué) 133****4652 剛剛成功領(lǐng)取
            李同學(xué) 135****8607 剛剛成功領(lǐng)取
            楊同學(xué) 132****5667 剛剛成功領(lǐng)取
            岳同學(xué) 134****6652 剛剛成功領(lǐng)取
            梁同學(xué) 157****2950 剛剛成功領(lǐng)取
            劉同學(xué) 189****1015 剛剛成功領(lǐng)取
            張同學(xué) 155****4678 剛剛成功領(lǐng)取
            鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
            董同學(xué) 138****2867 剛剛成功領(lǐng)取
            周同學(xué) 136****3602 剛剛成功領(lǐng)取
            相關(guān)推薦HOT
            PMP?認(rèn)證榮獲北京市境外職業(yè)資格認(rèn)可!

            北京市人力資源和社會保障局、北京市人才工作局近日發(fā)布了關(guān)于印發(fā)《北京市境外職業(yè)資格認(rèn)可目錄(3.0版)》的通知,新版目錄境外職業(yè)資格清單...詳情>>

            2023-09-07 17:27:00
            怎么選擇靠譜的短視頻運營培訓(xùn)機構(gòu)?

            怎么選擇靠譜的短視頻運營培訓(xùn)機構(gòu)?5G時代的來臨,短視頻作為新媒體中最為主流的內(nèi)容更加方便用戶瀏覽觀看信息,因此抖音、快手這類的短視頻平...詳情>>

            2023-09-07 15:05:06
            全媒體短視頻運營好就業(yè)么?

            全媒體短視頻運營好就業(yè)么?現(xiàn)在學(xué)習(xí)互聯(lián)網(wǎng)運營可不能只會單個的運營技術(shù),企業(yè)更喜歡全能型人才。如今的互聯(lián)網(wǎng)世界有多種平臺,新媒體、短視頻...詳情>>

            2023-09-07 14:49:25
            短視頻運營培訓(xùn)機構(gòu)有用嗎?

            短視頻運營培訓(xùn)機構(gòu)有用嗎?短視頻的火熱,催生了一大批的網(wǎng)絡(luò)紅人、網(wǎng)紅賬號,這些短視頻賬號通過實現(xiàn)粉絲流量變現(xiàn),獲得了非常豐厚的收入,自...詳情>>

            2023-09-06 13:49:12
            大數(shù)據(jù)分析就業(yè)高薪崗位介紹

            大數(shù)據(jù)分析就業(yè)高薪崗位介紹?大數(shù)據(jù)行業(yè)是一個快速發(fā)展的行業(yè),其主要特征是數(shù)據(jù)規(guī)模龐大、種類多樣、處理復(fù)雜。目前,大數(shù)據(jù)行業(yè)已經(jīng)成為全球...詳情>>

            2023-09-06 13:42:47
            開班信息
            北京校區(qū)
            • 北京校區(qū)
            • 大連校區(qū)
            • 廣州校區(qū)
            • 成都校區(qū)
            • 杭州校區(qū)
            • 長沙校區(qū)
            • 合肥校區(qū)
            • 南京校區(qū)
            • 上海校區(qū)
            • 深圳校區(qū)
            • 武漢校區(qū)
            • 鄭州校區(qū)
            • 西安校區(qū)
            • 青島校區(qū)
            • 重慶校區(qū)
            • 太原校區(qū)
            • 沈陽校區(qū)
            • 南昌校區(qū)
            • 哈爾濱校區(qū)