1、介绍正则表达式
- 规则表达式
- 用于检测（捕获）字符串中符合正则规则内容
- 创建
+ 字面量 /qwer/
+ 内置构造函数 new RegExp('qwer')
/*
介绍正则表达式
- 是js中的一种复杂类型数据 RegExp
- 正则表达式也叫规则表达式 Regular Expression
+ 规则表达式中的规则 就是描述字符串的规则
- 正则表达式作用: 用于检测(捕获)字符串中是否满足正则表达式规则的内容
- 创建正则表达式
1. 字面量
- 语法: 变量 = /正则规则/
+ 在js中 // 就是正则的标识
2. 内置构造函数
- 语法: 变量 = new RegExp(正则规则)
*/
// 1. 字面量
// let reg1 = /qwert/;
// let reg2 = /qwert/;
// console.log( reg1 )
// console.log( reg2 )
// console.log( reg2 == reg1) // false
// 2. 内置构造函数
// let reg1 = new RegExp('qwert');
// console.log( reg1 )
2. 正则表达式方法(检测)
- test
/*
正则表达式方法
1. test 检测方法
- 语法: 正则.test(字符串)
- 作用: 判断传入的字符串是否符合正则规则
- 返回值: 布尔值
+ 如果符合规则, 则返回true
+ 如果不符合规则, 则返回false
2. exec 捕获方法
- 语法: 正则.exec(字符串)
- 作用: 捕获传入字符串中符合正则规则的内容
- 返回值: 后续补充
*/
// 1. test
// 正则: 表示只要字符串中包含 qwert 即可
// let reg = /qwert/;
// console.log(reg.test('qweasdfga')) // fasle
// console.log(reg.test('6q6w6e9r9t9')) // fasle
// console.log(reg.test('666qwert999')) // true
// console.log(reg.test('qwertrewq')) // true
3. 正则表达式-基础元字符
- \d \D \s \S \w \W .
/*
正则表达式规则书写内容(组成)
1. 普通的字符
- 没有任何特殊含义字符
- 比如: q
2. 具有特殊含义字符
- 在正则表达式中具有特殊含义的字符
+ 一般都是用于表示一类内容
+ 比如: . 表示非换行任意字符
+ 比如: \d 表示一位数字
基础元字符
1. \d 表示一位数字
2. \D 表示一位非数字
3. \w 表示一位 数字或字母或下滑线
4. \W 表示一位 非数字或字母或下滑线
5. \s 表示一位 空白字符
6. \S 表示一位 非空白字符
7. . 表示一位 非换行的任意字符
*/
// 1. \d
// // 正则: 表示字符串只要包含一位数字即可
// let reg = /\d/;
// console.log(reg.test('qwertyuio')) // false
// console.log(reg.test('一二三四五')) // false
// console.log(reg.test('qwer1tyuio')) // true
// console.log(reg.test('qwer0tyuio'))// true
// console.log(reg.test('0987654321'))// true
// 2. \D
// // 正则: 表示字符串只要包含一位 非数字即可
// let reg = /\D/;
// console.log(reg.test('qwertyuio')) // true
// console.log(reg.test('一二三四五')) // true
// console.log(reg.test('qwer1tyuio')) // true
// console.log(reg.test('qwer0tyuio'))// true
// console.log(reg.test('0987654321'))// false
// 3. \w
// // 正则: 表示字符串只要包含一位 数字或字母或下划线即可
// let reg = /\w/;
// console.log(reg.test('qwertyuio')) // true
// console.log(reg.test('一二三四五')) // false
// console.log(reg.test('qwer1tyuio')) // true
// console.log(reg.test('!@#$%^&*'))// false
// console.log(reg.test('!@#$_%^&*'))// true
// console.log(reg.test('0987654321'))// true
// 4. \W
// // 正则: 表示字符串只要包含一位 非数字或字母或下划线即可
// let reg = /\W/;
// console.log(reg.test('qwertyuio')) // false
// console.log(reg.test('一二三四五')) // true
// console.log(reg.test('qwer1tyuio')) // false
// console.log(reg.test('!@#$%^&*'))// true
// console.log(reg.test('!@#$_%^&*'))// true
// console.log(reg.test('0987654321'))// false
// 5. \s
// // 正则: 表示字符串只要包含一位 空白字符 即可
// let reg = /\s/;
// console.log(reg.test('qwertyuio')) // false
// console.log(reg.test('一二 三四五')) // true
// console.log(reg.test('一二\n三四五')) // true
// console.log(reg.test('一二\t三四五')) // true
// console.log(reg.test(`
// `)) // true
// 6. \S
// 正则: 表示字符串只要包含一位 非空白字符 即可
// let reg = /\S/;
// console.log(reg.test('qwertyuio')) // true
// console.log(reg.test(' ')) // false
// console.log(reg.test('\n\n\n')) // false
// console.log(reg.test('\t\r\n\t')) // false
// console.log(reg.test(`
// `)) // false
// 7. .
// 正则: 表示字符串只要包含一位 非换行(\n) 即可
let reg = /./;
// console.log(reg.test('qwertyuio')) // true
// console.log(reg.test(' ')) // true
// console.log(reg.test('\n\n\n')) // false
// console.log(reg.test('\t\r\n\t')) // true
console.log(reg.test(`
`)) // false
console.log(reg.test(`
`)) // true
4. 正则表达式-限定元字符
- * ? + {n} {n,} {n,m}
/*
正则表达式-限定元字符
- 用于限定前面内容连续出现的次数
1. * 表示前一个内容必须连续出现0~无数次
2. ? 表示前一个内容必须连续出现0~1次
3. + 表示前一个内容必须连续出现1~无数次
4. {n} 表示前一个内容必须连续出现n次
5. {n,} 表示前一个内容必须连续出现n~无数次
- {0,} ===> *
- {1,} ===> +
6. {n,m} 表示前一个内容必须连续出现n~m次
- {0,1} ===> ?
*/
// 1. *
// // 正则: 表示字符串包含0~无数个数字 即可
// let reg = /\d*/;
// console.log(reg.test('qwert'))// true
// console.log(reg.test('qw1'))// true
// console.log(reg.test('qw12'))// true
// console.log(reg.test('qw123'))// true
// 2. ?
// // 正则: 表示字符串包含 0~1数字 即可
// let reg = /\d?/;
// console.log(reg.test('qwert'))// true
// console.log(reg.test('qw1'))// true
// console.log(reg.test('qw12'))// true
// console.log(reg.test('qw123'))// true
// 3. +
// // 正则: 表示字符串包含 1~无数个数字 即可
// let reg = /\d+/;
// console.log(reg.test('qwert'))// false
// console.log(reg.test('qw1'))// true
// console.log(reg.test('qw12'))// true
// console.log(reg.test('qw123'))// true
// 4. { n }
// // 正则: 表示字符串包含 3个连续数字 即可
// let reg = /\d{3}/;
// console.log(reg.test('qwert'))// false
// console.log(reg.test('qw1'))// false
// console.log(reg.test('qw1r2'))// false
// console.log(reg.test('qw1r2t3'))// false
// console.log(reg.test('qw123'))// true
// console.log(reg.test('qw123567'))// true
// 5. { n,}
// // 正则: 表示字符串包含 3~无数个连续数字 即可
// let reg = /\d{3,}/;
// console.log(reg.test('qwert'))// false
// console.log(reg.test('qw1'))// false
// console.log(reg.test('qw1r2'))// false
// console.log(reg.test('qw1r2t3'))// false
// console.log(reg.test('qw00'))// false
// console.log(reg.test('qw000'))// true
// console.log(reg.test('qw123567'))// true
// 6. { n, m }
// // 正则: 表示字符串包含 3~5个连续数字 即可
// let reg = /\d{3,5}/;
// console.log(reg.test('qwert'))// false
// console.log(reg.test('qw1'))// false
// console.log(reg.test('qw1r2'))// false
// console.log(reg.test('qw1r2t3'))// false
// console.log(reg.test('qw00'))// false
// console.log(reg.test('qw000'))// true
// console.log(reg.test('qw0001'))// true
// console.log(reg.test('qw123567'))// true
// console.log(reg.test('qw123562347'))// true
5. 正则表达式-边界元字符
- ^ 开头
- $ 结尾
/*
正则表达式-边界元字符
- 限定字符串开头和结尾内容的字符
1. ^ 表示以什么内容开头
- 在正则规则中书写最前面
2. $ 表示以什么内容结尾
- 在正则规则中书写最后面
注意:
+ 正则中有边界元字符则表示 只能
+ 正则中没有边界元字符则表示 包含
*/
// // 1. ^
// // 正则: 表示字符串只能 以数字开头
// let reg = /^\d/
// console.log(reg.test('一二三666')) // false
// console.log(reg.test('.34567')) // false
// console.log(reg.test('0astfd34567')) // true
// console.log(reg.test('1223456dss34567')) // true
// 2. $
// 正则: 表示字符串只能 以数字结尾
// let reg = /\d$/
// console.log(reg.test('一二三666')) // true
// console.log(reg.test('.34567')) // true
// console.log(reg.test('0astfd34567')) // true
// console.log(reg.test('1223456dss34567')) // true
// 正则: 表示字符串只能 是一位数字
// let reg = /^\d$/;
// console.log(reg.test('0qwerty0')); // false
// console.log(reg.test('00')); // false
// console.log(reg.test('0')); // true
// console.log(reg.test('1')); // true
// console.log(reg.test('3')); // true
// // 正则: 表示字符串只能 是三位数字
// let reg = /^\d{3}$/;
// console.log( reg.test('000') ) // true
// console.log( reg.test('666') ) // true
// console.log( reg.test('123') ) // true
// console.log( reg.test('456') ) // true
// console.log( reg.test('123123') ) // false
// // 正则: 表示字符串只能 是3~无数位数字
// let reg = /^\d{3,}$/;
// console.log(reg.test('1')) // false
// console.log(reg.test('12')) // false
// console.log(reg.test('123')) // true
// console.log(reg.test('123456')) // true
// console.log(reg.test('123456678')) // true
6. 正则表达式-特殊元字符
- (abc) (ab|c) [abc] [a-z] [^a-z] \
/*
正则表达式-特殊元字符
1. ()
- 表示一个整体
- 表示分组(单独捕获)
2. |
- 表示或者,匹配左边或右边正则即可
- 一般和()一起使用
3. []
- 表示一个范围,只要是中括号的某个内容即可
- 一个[]表示一位
4. -
- 和[]一起使用,表示连续的范围
+ 注意: 连续范围就是 连续的编码
- 比如:
+ [0-9] 表示一位数字
+ [a-z] 表示一位小写字母
+ [A-Z] 表示一位大写字母
+ [A-Za-z] 表示一位字母
+ [\u4e00-\u9fa5] 表示一位中文字符
5. [^]
- 表示一位 除了 [^] 中的字符都行
6. \
- 表示转义,可以将部分普通字符转义为具有含义的字符
+ 也可以将具有含义的字符转义普通字符
- 比如:
+ d 是普通字符, \d 表示一位数字
+ . 表示一位非换行, \. 就是表示普通的字符点
*/
// 1. ()
// 正则: 表示字符串 只能 是 '123123'
// let reg1 = /^(123){2}$/;
// console.log( reg1.test('123') ) // false
// console.log( reg1.test('1233') ) // false
// console.log( reg1.test('123123') ) // true
// 正则: 表示字符串 只能 是 '1233'
// let reg2 = /^123{2}$/;
// console.log(reg2.test('123')) // false
// console.log(reg2.test('1233')) // true
// console.log(reg2.test('123123')) // false
// 2. |
// // 正则: 表示字符串 只能 是 '12' 或者 '34'
// let reg1 = /^(12|34)$/;
// console.log(reg1.test('12')) //true
// console.log(reg1.test('34')) //true
// console.log(reg1.test('1234')) //false
// // 正则: 表示字符串 只能 是 '12'开头 或者 '34'结尾
// let reg1 = /^12|34$/;
// console.log(reg1.test('12')) //true
// console.log(reg1.test('34')) //true
// console.log(reg1.test('1234')) //true
// console.log(reg1.test('12666')) //true
// console.log(reg1.test('66634')) //true
// 3. []
// // 正则: 表示字符串 只能 两位数字 数字也只能1或2或3或4
// let reg = /^[1234]{2}$/;
// console.log(reg.test('11')) // true
// console.log(reg.test('22')) // true
// console.log(reg.test('33')) // true
// console.log(reg.test('44')) // true
// console.log(reg.test('12')) // true
// console.log(reg.test('34')) // true
// console.log(reg.test('36')) // false
// console.log(reg.test('3')) // false
// 4. -
// 正则: 表示字符串 只能 以字母开头的4~6位字符,后面的可以是任意 字母数字_
// let reg = /^[a-zA-Z]\w{3,5}$/
// console.log( reg.test('a000') ) // true
// console.log( reg.test('leon') ) // true
// console.log( reg.test('admin') ) // true
// console.log( reg.test('1admin') ) // false
// console.log( reg.test('adminleon') )// false
// 正则: 表示字符串 只能 是3~6位的中文
// let reg = /^[\u4e00-\u9fa5]{3,6}$/;
// console.log(reg.test('qwert')) // false
// console.log(reg.test('你好')) // false
// console.log(reg.test('你好呀')) // true
// console.log(reg.test('你好呀哈哈')) // true
// console.log(reg.test('你好呀哈')) // true
// console.log(reg.test('你好呀!')) // false
// 5. [^]
// 正则: 表示字符串 只能是一位非数字
// let reg = /^[^0-9]$/;
// console.log(reg.test('你')) // true
// console.log(reg.test('e')) // true
// console.log(reg.test('es')) // false
// console.log(reg.test('0')) // false
// console.log(reg.test('4')) // false
// console.log(reg.test('9')) // false
// 6.
// 正则: 表示字符串只能是 'qq.com'
// let reg = /^qq\.com$/;
// console.log( reg.test('qq.com') ) // true
// console.log( reg.test('qq1com') ) // false
7. 正则表达式-重复元字符
- \n 表示重复第n个()最后匹配的内容
/*
正则表达式-重复元字符
- \n
+ 表示\n的位置重复第n个小()最后匹配的内容
- 如果没有\n小括号则表示 数值n
+ 比如: /(\d)\1/
- 表示在\1得为重复第一个小括号匹配的内容
- 正则中小阔的计算
+ 只按照开始括号计算第几个 (
- 比如:
+ ((()(())))
*/
// 正则: 表示字符串 只能是连续的两个数字, 而且必须相同
// let reg = /^(\d)\1$/;
// console.log(reg.test('00')) // true
// console.log(reg.test('01')) // false
// console.log(reg.test('02')) // false
// console.log(reg.test('09')) // false
// let reg = /^((1)((2)(3))(4))\3$/
// console.log( reg.test('123423') ) // true
// console.log( reg.test('123434') ) // false
// let reg = /^(12)(\d){2}\2$/
// console.log( reg.test('12011') )
// console.log( reg.test('12677') )
// let reg = /^(12)(\d){2}\9$/
// console.log( reg.test(12349) )
// console.log( reg.test(12549) )
// console.log( reg.test(12119) )
// let reg = /^((12)|(34))\3$/
// // console.log( reg.test('3434') ) // true
// // console.log( reg.test('12') ) // true
// // console.log( reg.test('1212') ) // false
8. 正则表达式-标识符
- i 忽略大小写
- g 开启全局捕获
/*
正则表达式-标识符
- 用于修饰整个表达式的,书写在正则//后面
+ i 表示忽略大小写匹配捕获
+ g 表示全局捕获(捕获方法中讲解)
*/
let reg = /^abc$/i;
console.log( reg.test('abc') ) // true
console.log( reg.test('aBc') ) // true
console.log( reg.test('ABc') ) // true
console.log( reg.test('ABC') ) // true
console.log( reg.test('AbC') ) // true
9. 正则表达式方法(捕获)
- exec
/*
正则表达式方法
1. test 检测方法
- 语法: 正则.test(字符串)
- 作用: 判断传入的字符串是否符合正则规则
- 返回值: 布尔值
+ 如果符合规则, 则返回true
+ 如果不符合规则, 则返回false
2. exec 捕获方法
- 语法: 正则.exec(字符串)
- 作用: 捕获传入字符串中符合正则规则的内容
- 返回值:
+ 如果字符串中没有符合正则的字符片段则返回null
+ 如果字符串中有符合正则的字符片段
- 如果正则表达式没有g,没有()
+ 每次捕获都是从字符串的开头位置往后检索,找到了则停止检索
- 返回值为数组,数组的[0]的值就是捕获的内容
- 如果正则表达式有g
+ 第一次捕获从字符串的开头位置往后检索,找到了则停止检索
- 后续的每次捕获都是从上次捕获结束位置开始往后检索,找到了则停止检索
+ ....,直到捕获不到内容返回null
+ 则下次捕获有又是从从字符串的开头位置往后检索 ....
+ 每次捕获到内容 则返回值为数组,数组的[0]的值就是捕获的内容
- 如果正则表达式有()
+ 返回数组,数组[0]就是正则表达式捕获的内容
- 并且数组从[1]开始为内容就是 正则中()单独捕获的内容
+ 注意: 不单独捕获(?:)
*/
// 没有符合的内容
// let reg = /\d{2}/;
// let str = 'qwer1ty';
// console.log( reg.exec(str) ) // null
// 没有g,没有()
// let str = 'qw12er34tyu56we';
// let reg = /\d{2}/;
// console.log(reg.exec(str));// ['12']
// console.log(reg.exec(str));// ['12']
// console.log(reg.exec(str));// ['12']
// 有g
// let str = 'qw12er34tyu56we';
// let reg = /\d{2}/g;
// console.log(reg.exec(str)) // ['12']
// console.log(reg.exec(str)) // ['34']
// console.log(reg.exec(str)) // ['56']
// console.log(reg.exec(str)) // null
// console.log(reg.exec(str)) // ['12']
// 有()
// let str = 'qw12er34tyu56we';
// let reg = /(\d)(\d)/g;
// console.log(reg.exec(str)) //['12','1','2']
// console.log(reg.exec(str)) //['34','3','4']
// let str = '输入的身份证号: 36073520050708340x';
// let str = '输入的身份证号: 360735200507083401,这就是你的身份证?';
// /*
// 36 省份
// 07 市
// 35 区县
// 2005 出生年份
// 07 出生月份
// 08 出生日期
// 34 当地的顺序码
// 0 性别
// 1 随机x
// */
// let reg = /(\d{2})(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})(?:\d{2})(\d)(?:\d|x)/;
// console.log( reg.exec(str) );
10. 正则表达式的两大特性
- 懒惰
- 贪婪
/*
正则表达式的两大特性
1. 懒惰性
- 正则表达式每捕获都只会从字符串的开头位置检索
- 解决办法: 全局标识 g
2. 贪婪性
- 贪婪: 能捕获多少,就捕获多少
+ 尽量多的捕获
+ 贪婪限定符
- *
- ?
- +
- {n,}
- {n,m}
+ 正则捕获时候,都会尽量按照多的捕获
- 非贪婪: 能捕获多少,就捕获多少
+ 尽量少的捕获
+ 非贪婪限定符
- *?
- ??
- +?
- {n,}?
- {n,m}?
+ 正则捕获时候,都会尽量按照少的捕获
*/
let str = '<div>我是内容1</div><div>我是内容2</div><div>我是内容3</div>';
// let reg = /<.*>/; // 贪婪捕获
// let reg = /<.*?>/; // 非贪婪捕获
// console.log(reg.exec(str))
11. 创建正则表达式的区别
- 标识书写区别
- 字符拼接
- 元字符书写
/*
创建正则表达式的区别
- 字面量创建和构造函数创建的区别
1. 书写标识符的区别
- 字面量: /qwer/ig
- 内置构造函数: new RegExp('qwer','ig');
2. 字符串拼接能力区别
- 字面量: 不行
- 内置构造函数: 因为是本身传递就是字符串参数,所有可以拼接
3. 书写元字符区别
- 字面量: /\d/
- 内置构造函数: new RegExp('\\d');
+ 注意: 参数是字符串类型,在字符串中\具有转义含义
*/
// 1. 书写标识符的区别
// let reg1 = /qwer/ig;
// let reg2 = new RegExp('qwer', 'ig');
// console.log( reg1 )
// console.log( reg2 )
// 2. 字符串拼接能力区别
// let key1 = 'zs';
// let key2 = '666';
// let reg1 = "/" + key1 + key2 + "/";
// console.log(reg1) // 不能正则表达式
// // reg1.test('zs666') // 报错
// let key1 = 'zs';
// let key2 = '666';
// let reg2 = new RegExp(key1+key2);
// console.log( reg2 )
// console.log( reg2.test('zs666') ) // true
// 3. 书写元字符区别
// console.log( /\d/ )
// console.log( '\d' ) // 'd' ===> 在字符串中\具有转义含义,在转义中消失了
let reg = new RegExp('\\d');
// 字符串中: 第一个\将第二个\字符 转义为普通的\字符
console.log(reg) // 正则: /\d/
12. 关联使用正则表达式的字符串方法
- search
- match
- replace
/*
一些字符串方法可以使用正则表达式作为参数
1. search
- 语法: 字符串.search('字符片段')
- 语法: 字符串.search(正则表达式)
- 作用: 查找字符串中是否有对应的内容
+ 如果 传入的'字符片段' 或 正则 在原字符串中没有匹配的内容则返回 -1
+ 如果 传入的'字符片段' 或 正则 在原字符串中有匹配的内容则返回 对应的索引
2. match
- 语法: 字符串.match('字符片段')
- 语法: 字符串.match(正则表达式)
- 作用: 查找字符串中是否有对应的内容
+ 如果 传入的'字符片段' 或 正则 在原字符串中没有匹配的内容则返回 null
+ 如果 传入的'字符片段' 或 正则 在原字符串中有匹配的内容
- 如果正则没有g或'字符片段' 则返回值 和正则的exec方法一样 返回数组[0] 是匹配的内容
- 如果正则有g 则返回值为数组,数组数据是匹配的所有内容
3. replace
- 语法: 字符串.replace('字符片段',替换上的内容)
- 语法: 字符串.replace(正则表达式,替换上的内容)
- 作用: 字符串替换方法
+ 如果 传入的是 '字符片段' 或 没有g的正则,则只会替换匹配的第一部分内容
+ 如果 传入的是 有g的正则,则替换匹配所有内容
+ 返回值为替换后的字符串
*/
// 1. search
// let str = '12QQ345WX67WB89';
// console.log( str.search('TT') ) // -1
// console.log( str.search('QQ') ) // 2
// console.log( str.search(/[a-z]{2}/) ) // -1
// console.log( str.search(/[a-z]{2}/i) ) // 2
// 2. match
// let str = '12QQ345WX67WB89';
// console.log( str.match('TT') ) // null
// console.log( str.match(/[a-z]{2}/) ) // null
// console.log(str.match('QQ')) // ['QQ']
// console.log(str.match(/[a-z]{2}/i)) //['QQ']
// console.log(str.match(/[a-z]{2}/ig)) //['QQ', 'WX', 'WB']
// 3. replace
// let str = '12QQ345WX67WB89';
// console.log( str.replace('QQ','**') ) // 12**345WX67WB89
// console.log( str.replace(/[a-z]{2}/i,'**') ) // 12**345WX67WB89
// console.log( str.replace(/[a-z]{2}/ig,'**') ) // 12**345**67**89
// 字符串的replace方法扩展
// 第二个参数可以是一个函数,返回值就是替换上的内容
// let arr = ['大麻', '夜总会'];
// let str = '无论生活多大麻烦,黑夜总会过去,无论生活多大麻烦,黑夜总会过去';
// arr.forEach(s => {
// str = str.replace(new RegExp(s, 'g'), v => {
// // console.log(v) // 函数内的形参v就是替换下的内容
// return '*'.repeat(v.length);
// })
// })
// console.log(str);
13. 正则练习
/*
书写用户名的正则表达式
1. 只能字母开头 [a-zA-Z]
2. 只能有数字字母组成 [0-9a-zA-Z]
3. 长度为3~11 {3,11}
*/
// let reg = /^[a-zA-Z][0-9a-zA-Z]{2,10}$/;
// let reg = /^[a-z][0-9a-z]{2,10}$/i;
/*
书写手机号码的正则表达式
1. 开头可以是 +86
2. 手机号码11位
3. 号段 135|150|138|137|139|136|152
*/
// let reg = /^(\+86)?(135|150|138|137|139|136|152)\d{8}$/;
// console.log( reg.test('+8615211111111') );
// console.log( reg.test('15211111111') );
/*
qq邮箱正则表达式
1. qq号码数字5~10位
2. 开头不能为0
3. @qq.com
*/
// let reg = /^[1-9]\d{4,9}@qq\.com$/;
14. 正则案例----密码强度校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leon</title>
<style>
* {
margin: 0;
padding: 0;
}
form {
width: 300px;
padding: 20px;
margin: 50px auto;
border: 10px solid skyblue;
border-radius: 10px;
}
form p {
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
}
form>p>span {
width: 30%;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #fff;
background-color: #ccc;
}
form>p>span:nth-child(1).active {
background-color: red;
}
form>p>span:nth-child(2).active {
background-color: orange;
}
form>p>span:nth-child(3).active {
background-color: green;
}
.err {
color: red;
display: none;
}
.err1 {
color: red;
display: none;
}
</style>
</head>
<body>
<form action="">
<div class="err">密码长度只能是4~11</div>
<div class="err1">密码格式错误</div>
<label>
密码: <input type="text" id="pwd" autocomplete="off">
</label>
<p>
<span>弱</span>
<span>中</span>
<span>强</span>
</p>
</form>
<script>
/*
效果分析
- 输入内容则检测长度和强度
+ 如果长度不在范围内 则div.err显示,并且不做强度校验
+ 密码的强度在 p>span元素高亮展示
- 约定密码强度: 密码可以由数字,字母,特殊符号(!@#$%^)组成
+ 如果只有一种 则密码强度为弱
+ 如果只有两种 则密码强度为中
+ 如果三种都有 则密码强度为强
实现:
- 给input绑定input输入事件
+ 在事件中获取输入的内容并判断长度
+ 校验强度 强度变量 level = 0
- 准备三个正则
+ 依次检测输入的密码符合要求则 强度++
- 最后判断level等级就是对应的强度等级
*/
// 获取元素
let spanEles = document.querySelectorAll('span');
let errBox = document.querySelector('.err');
let err1Box = document.querySelector('.err1');
let inp = document.querySelector('input');
// 准备三个正则
let r1 = /\d/;
let r2 = /[a-z]/i;
let r3 = /[!@#\$\%\^]/;
let r = /^[\da-z!@#\$\%\^]{4,11}$/;
// 绑定事件
inp.oninput = function () {
// 字符串方法 .trim() 作用: 移除两边的空格字符
let v = inp.value.trim();
// console.log(v);
// 移除所有span的高亮
spanEles.forEach(ele => ele.classList.remove('active'));
// 判断 输入密码的长度
if (v.length < 4 || v.length > 11) return errBox.style.display = 'block';
// 密码长度没问题
errBox.style.display = 'none';
// 密码格式校验
if(!r.test(v)) return err1Box.style.display = 'block';
err1Box.style.display = 'none'
// 密码强度约定
let level = 0;
// 正则校验判断
if (r1.test(v)) level++;
if (r2.test(v)) level++;
if (r3.test(v)) level++;
// 判断level大于0则对应的span元素高亮
level > 0 && spanEles[level - 1].classList.add('active');
}
/*
level 密码强度展示
0 没有
1 spanEles[0]
2 spanEles[1]
3 spanEles[2]
*/
</script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
