js 输入框提示密码强度
时间: 2023-08-31 19:10:45 浏览: 40
以下是一个简单的 JavaScript 输入框提示密码强度的示例:
HTML:
```
<label>密码:</label>
<input type="password" id="password">
<div id="password-strength"></div>
```
JavaScript:
```
var passwordInput = document.getElementById("password");
var passwordStrength = document.getElementById("password-strength");
passwordInput.addEventListener("input", function() {
var password = passwordInput.value;
var strength = 0;
if (password.length >= 8) {
strength += 1;
}
if (/[a-z]/.test(password)) {
strength += 1;
}
if (/[A-Z]/.test(password)) {
strength += 1;
}
if (/[0-9]/.test(password)) {
strength += 1;
}
if (/[^a-zA-Z0-9]/.test(password)) {
strength += 1;
}
var strengthText = "";
switch (strength) {
case 0:
strengthText = "密码太弱";
break;
case 1:
strengthText = "密码较弱";
break;
case 2:
strengthText = "密码一般";
break;
case 3:
strengthText = "密码较强";
break;
case 4:
strengthText = "密码很强";
break;
}
passwordStrength.innerHTML = strengthText;
});
```
此示例使用事件监听器在输入框中添加一个“input”事件,每当输入框中的密码更改时,它将重新计算密码的强度,并在页面上显示一个简单的文本提示。该示例使用了一些基本的密码强度标准,如密码长度、小写字母、大写字母、数字和特殊字符。根据密码符合这些标准的数量,它将显示一条相应的文本提示。