Как на JavaScript реализовать проверку силы пароля (длина, цифры, спецсимволы) при регистрации пользователя?

Проверка силы пароля — важная часть UX при регистрации пользователя. Ниже представлена полная реализация на чистом JavaScript.

## Критерии оценки пароля

Обычно проверяют следующие параметры:
— **Длина** — минимум 8 символов (рекомендуется 12+)
— **Наличие цифр** — хотя бы одна цифра (0–9)
— **Строчные и прописные буквы** — смешанный регистр
— **Спецсимволы** — например, `!@#$%^&*()_+-=[]{}|;’:»,./?`

## Пример функции проверки

javascript
function checkPasswordStrength(password) {
let score = 0;
const feedback = [];

if (password.length >= 8) {
score++;
} else {
feedback.push(‘Минимум 8 символов’);
}

if (password.length >= 12) score++;

if (/[0-9]/.test(password)) {
score++;
} else {
feedback.push(‘Добавьте хотя бы одну цифру’);
}

if (/[a-z]/.test(password)) {
score++;
} else {
feedback.push(‘Добавьте строчные буквы’);
}

if (/[A-Z]/.test(password)) {
score++;
} else {
feedback.push(‘Добавьте прописные буквы’);
}

if (/[!@#$%^&*()_+-=[]{}|;’:»,./?]/.test(password)) {
score++;
} else {
feedback.push(‘Добавьте спецсимволы (!@#$ и т.д.)’);
}

let strength = »;
if (score <= 2) strength = 'Слабый';
else if (score {
const result = checkPasswordStrength(passwordInput.value);
const colors = { ‘Слабый’: ‘red’, ‘Средний’: ‘orange’, ‘Сильный’: ‘green’ };

strengthText.textContent = result.strength;
strengthBar.style.width = (result.score / 6 * 100) + ‘%’;
strengthBar.style.backgroundColor = colors[result.strength];
});

## HTML-разметка

html

## Советы по улучшению

1. **Запрещайте распространённые пароли** — сверяйтесь с базой типа `password123`.
2. **Добавьте показ/скрытие пароля** — иконка глаза улучшает UX.
3. **Серверная валидация** — никогда не полагайтесь только на клиентскую проверку.
4. **Используйте библиотеки** — например, `zxcvbn` от Dropbox для более точной оценки.

Такой подход обеспечивает мгновенную обратную связь пользователю и повышает безопасность аккаунтов.