Javascript — простой измеритель надежности пароля

kravasuper

Я пытаюсь создать простой индикатор надежности пароля с помощью 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>

Код (разметка):

AdmVPS

спасибо, это очень помогло, я тоже поменял:

 passwordInput.addEventListener('input', function() {

Код (разметка): to

 passwordInput.addEventListener('change', function() {

Код (разметка): по какой-то причине «изменение» не обновляет элемент прогресса при вводе, тогда как «ввод» это делает. Я не знаю, почему?

masterknight

Измените строки 7 и 8 на

 var passwordInput = document.getElementById("pwd");
passwordInput.addEventListener('change', function() {
password = passwordInput.value;

HTML: по сути, вы тестировали HTML, а не значение поля ввода.

Похожие темы	Дата
[Джон Резиг] JavaScript для профессионалов	19.10.2024, 18:10
[Udemy] Практический Vue.js с нуля до траблшутинга (2019)	19.10.2024, 18:10
Data structures and algorithms in javascript (2017)	19.10.2024, 18:10
csv json и массивы	19.10.2024, 18:10
Локальное хранилище	19.10.2024, 18:10
Попытка заставить автозапуск работать после щелчка по изображению	19.10.2024, 18:10
Жесткий случайный цвет с ограничением	19.10.2024, 18:10
Определение диапазона движения с помощью массива	19.10.2024, 18:10
Остановить воспроизведение звука при закрытии видеоплеера	19.10.2024, 18:10
LoftSchool - Комплексное обучение JavaScript 2018	19.10.2024, 18:10

Javascript — простой измеритель надежности пароля

kravasuper

AdmVPS

masterknight

I AM

Интересно