- 16, May 2024
- #1
Я пытаюсь создать простой индикатор надежности пароля с помощью javascript и элемента прогресса html5, что-то не так, он не работает, но нет ошибок консоли, какие-либо предложения, пожалуйста, помогите?:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Password Meter</title>
<script>
window.addEventListener('load', function() {
var password = document.getElementById("pwd");
password.addEventListener('change', function() {
// Reset if password length is zero
if (password.length === 0) {
document.getElementById("progresslabel").innerHTML = "";
document.getElementById("progress").value = "0";
return;
}
// Password requirements
var match = new Array();
match.push("[$@$!%*#?&]"); // Special Chars
match.push("[A-Z]"); // Uppercase
match.push("[0-9]"); // Numbers
match.push("[a-z]"); // Lowercase
// Check progress
var prog = 0;
for (var i = 0; i < match.length; i++) {
if (new RegExp(match[i]).test(password)) {
prog++;
}
}
//Length must be at least 8 chars
if(prog > 2 && password.length > 7){
prog++;
}
// Display it
var progress = "";
var strength = "";
switch (prog) {
case 0:
case 1:
case 2:
strength = "25%";
progress = "25";
break;
case 3:
strength = "50%";
progress = "50";
break;
case 4:
strength = "75%";
progress = "75";
break;
case 5:
strength = "100% - Password strength is good";
progress = "100";
break;
}
document.getElementById("progresslabel").innerHTML = strength;
document.getElementById("progress").value = progress;
});
});
</script>
<style>
progress {
-webkit-appearance: none;
appearance: none;
max-width: 120px;
margin: 0 2px;
}
progress[value] {
color: #777
} /* IE10 */
progress::-webkit-progress-bar {
background:#ccc;
}
progress::-webkit-progress-value {
background:#777
}
progress::-moz-progress-bar {
background:#777;
}
</style>
</head>
<body>
<form>
<div>
<label for="pwd">Password:</label>
<input type="text" id="pwd">
<progress id="progress" value="0" max="100" data-label="password strength">70</progress>
<span id="progresslabel"></span></div>
</form>
</body>
</html>
![[Голтис, Шриджит, Раевский, Радомская, Гринблат] Излечи Неизлечимое! (2020)](/assets/images/icons/forum3.png){kind=icon}
