Я пытаюсь создать простой индикатор надежности пароля с помощью 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() { if (password.length === 0) { document.getElementById("progresslabel").innerHTML = ""; document.getElementById("progress").value = "0"; return; } var match = new Array(); match.push("[$@$!%*#?&]"); // Special Chars match.push("[A-Z]"); // Uppercase match.push("[0-9]"); // Numbers match.push("[a-z]"); // Lowercase var prog = 0; for (var i = 0; i < match.length; i++) { if (new RegExp(match[i]).test(password)) { prog++; } } if(prog > 2 && password.length > 7){ prog++; } 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
} 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>
