<!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;
}
form {
width: 500px;
padding: 20px;
border: 5px solid pink;
border-radius: 15px;
margin: 50px auto;
}
label {
font-size: 20px;
}
label>input {
font-size: 20px;
padding-left: 20px;
}
label>p {
height: 30px;
display: flex;
justify-content: space-between;
margin-top: 20px;
}
label>p>span {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
color: #fff;
}
label>p>span:nth-child(1).active {
background-color: red;
}
label>p>span:nth-child(2).active {
background-color: orange;
}
label>p>span:nth-child(3).active {
background-color: green;
}
</style>
</head>
<body>
<form>
<label>
密码 : <input type="text">
<p>
<span>弱</span>
<span>中</span>
<span>强</span>
</p>
</label>
</form>
<script>
/**
* 需求:
* 密码包含 数字-字母-符号(!@#);
* 1. 包含一种~弱;
* 2. 包含两种~中;
* 3. 包含三种~强
*/
/**
* 逻辑:
* 判断密码符合这三种符号的哪些
*
* 1.拿到密码
* 2.准备正则符合三个强度的哪些
* 3.根据密码的强度，决定高亮几个span标签
* */
// 0.获取标签
const inp = document.querySelector('input')
const spans = [...document.querySelectorAll('span')]
// 1.给input绑定事件
inp.oninput = function() {
// 1.1拿到密码
const value = this.value
// 1.2准备正则
const r1 = /\d/
const r2 = /[a-zA-Z]/
const r3 = /[!@#]/
// 1.3通过正则判断当前密码属于哪个强度等级
let level = 0 //默认为0级
if(r1.test(value)) {
//当前分支执行,说明当前密码包含数字
level++
}
if(r2.test(value)) {
//当前分支执行,说明当前密码包含字母
level++
}
if(r3.test(value)) {
//当前分支执行,说明当前密码包含特殊符号
level++
}
/**
* 1.4根据密码的强度，决定高亮几个span标签
*
* 思路:
* 1.给所有span取消类名
* 2.给我们需要的span添加类名
* */
for(let i = 0; i < spans.length; i++) {
// 1.给所有span取消类名
spans[i].className = ''
/**
* 2.给我们需要的span添加类名
*
* level 存储的是密码的强度等级
* level === 1 高亮的是 spans[0]
* level === 2 高亮的是 spans[0]spans[1]
* level === 3 高亮的是 spans[0]spans[1]spans[2]
*/
if(i < level) {
spans[i].className = 'active'
}
}
}
//0.获取元素
// var inp = document.querySelector('input')
// var pSpan = [...document.querySelectorAll('p>span')] //获取p标签下的所有span以数组的方式展示
// // console.log(span)
// // var reg = /(\w|\W)/
// // console.log(reg.test('123qwer!@#'))
// var reg1 = /\d/
// var reg2 = /[a-zA-Z]/
// var reg3 = /[~!@#$%^&*]/
// inp.oninput = function() {
// var flag = 0
// var value = inp.value
// if(reg1.test(value)){flag++}
// if(reg2.test(value)){flag++}
// if(reg3.test(value)){flag++}
// for(var i = 0; i < pSpan.length; i++) {
// // console.log(pSpan[i])
// pSpan[i].classList.remove('active')
// if(i < flag) {pSpan[i].classList.add('active')}
// }
// }
</script>
</body>
</html>
