<form action="">
<label for="password-box">Пароль: </label>
<input type="password" id="password-box" oninput="checkDifficulty()">
<strong id="password-difficulty"></strong>
</form>
<script type="text/javascript">
// Элементы, с которыми работаем
var passwordBox = document.getElementById("password-box");
var passwordDifficultyLabel = document.getElementById("password-difficulty");
// Паттерны для поиска
var invalidPattern = /[^a-zA-Z0-9\!\@\#\$\%\^\&\*\(\)\_\-\+\=\\\|\/\.\,\:\;\[\]\{\}]/g;
var lowerCasePattern = /[a-z]/g;
var upperCasePattern = /[A-Z]/g;
var digitsPattern = /[0-9]/g;
var specialCharsPattern = /[\!\@\#\$\%\^\&\*\(\)\_\-\+\=\\\|\/\.\,\:\;\[\]\{\}]/g;
// Цвета вывода сообщения
var Colors = Object.freeze({
NONE: "#000000",
ERROR: "#DD5044",
EASY: "#FFCE44",
MEDIUM: "#4C8BF5",
HARD: "#18A15F"
});
// Варианты сообщений
var Messages = Object.freeze({
IS_TOO_SHORT: "Пароль слишком короткий!",
IS_TOO_EASY: "Пароль слишком простой!",
HAS_INVALID_CHARS: "Пароль содержит недопустимые символы!",
EASY: "Ненадежный пароль!",
MEDIUM: "Надежный пароль!",
HARD: "Очень надежный пароль!"
});
// Проверка сложности пароля
function checkDifficulty() {
var password = passwordBox.value;
if (password.length < 6) {
showMessage(Messages.IS_TOO_SHORT, Colors.ERROR);
return;
}
if (password.search(invalidPattern) >= 0) {
showMessage(Messages.HAS_INVALID_CHARS, Colors.ERROR);
return;
}
var difficulty = 0;
if (password.search(lowerCasePattern) >= 0)
difficulty++;
if (password.search(upperCasePattern) >= 0)
difficulty++;
if (password.search(digitsPattern) >= 0)
difficulty++;
if (password.search(specialCharsPattern) >= 0)
difficulty++;
switch (difficulty) {
case 1:
showMessage(Messages.IS_TOO_EASY, Colors.ERROR);
break;
case 2:
showMessage(Messages.EASY, Colors.EASY);
break;
case 3:
showMessage(Messages.MEDIUM, Colors.MEDIUM);
break;
case 4:
showMessage(Messages.HARD, Colors.HARD);
break;
}
}
// Показ сообщения
function showMessage(text, color) {
if (color === undefined)
color = Colors.NONE;
passwordDifficultyLabel.style.color = color;
passwordDifficultyLabel.innerText = text;
return true;
}
</script>