这是一个HTML页面示例，演示了如何实现实时检测用户在输入框中输入的密码强度。当输入包含数字、字母和特殊字符时，根据包含的字符类型数量判断密码强度，分别显示‘弱’、‘中’或‘强’。页面使用JavaScript监听输入事件，并通过正则表达式检查字符类型。
输入框输入密码，规定输入以下几种类型
数字、字母、特殊字符（@$#）
如果仅包含其中一个，密码强度为 弱
如果仅包含其中两个，密码强度为 中
如果仅包含其中三个，密码强度为 强
当输入框输入时，显示当前密码的强弱程度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="input">
<script>
var oInput = document.getElementById('input')
var timer = null
oInput.addEventListener('input', function (e) {
clearInterval(timer)
var timer = setTimeout(function () {
var password = e.target.value
// 判断是否包含数字
var regNumber = /\d+/
// 判断是否包含字母
var regLetter = /[A-Za-z]+/
// 判断是否包含特殊字符
var regSpecial = /[@#$]/
// 通过level来累加情况 初始level 0
var level = 0
if (regNumber.test(password)) { level++ }
if (regLetter.test(password)) { level++ }
if (regSpecial.test(password)) { level++ }
console.log(level === 3 ? '强' : (level === 2 ? '中' : '弱'))
}, 500)
})
</script>
</body>
</html>
over～
扫一扫
1162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
