Валидация пароля на JavaScript

Валидация пароля — это процесс проверки соответствия введённого пользователем пароля определённым требованиям безопасности. Клиентская валидация (до отправки на сервер) улучшает UX, мгновенно сообщая об ошибках, но не заменяет серверную проверку.

Базовый HTML для формы с паролем

Создадим простую форму с полями для пароля и его подтверждения:

<div class="password-form">
  <h2>Смена пароля</h2>
  
  <div id="password-errors" class="error-messages"></div>
  
  <form id="password-form">
    <div class="form-group">
      <label for="password">Новый пароль:</label>
      <input type="password" id="password" required>
    </div>
    
    <div class="form-group">
      <label for="confirm-password">Подтвердите пароль:</label>
      <input type="password" id="confirm-password" required>
    </div>
    
    <button type="submit">Сохранить</button>
  </form>
  
  <div class="password-hints">
    Пароль должен содержать минимум 8 символов, 1 заглавную букву, 1 цифру и 1 спецсимвол.
  </div>
</div>

Реализация валидации на чистом JavaScript

1. Основная функция валидации

function validatePassword(password) {
  const errors = [];
  
  // Проверка длины
  if (password.length < 8) {
    errors.push("Пароль должен содержать минимум 8 символов");
  }
  
  // Проверка заглавных букв
  if (!/[A-Z]/.test(password)) {
    errors.push("Добавьте хотя бы одну заглавную букву");
  }
  
  // Проверка цифр
  if (!/\d/.test(password)) {
    errors.push("Добавьте хотя бы одну цифру");
  }
  
  // Проверка спецсимволов
  if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
    errors.push("Добавьте хотя бы один спецсимвол");
  }
  
  return errors;
}

2. Проверка совпадения паролей

function checkPasswordMatch(password, confirmPassword) {
  return password === confirmPassword;
}

3. Обработка событий формы

const passwordInput = document.getElementById('password');
const confirmInput = document.getElementById('confirm-password');
const errorContainer = document.getElementById('password-errors');
const form = document.getElementById('password-form');

// Оптимизация с debounce
function debounce(func, timeout = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

const validateInputs = debounce(() => {
  const password = passwordInput.value;
  const confirmPassword = confirmInput.value;
  
  // Очищаем предыдущие ошибки
  errorContainer.innerHTML = '';
  
  // Валидация основного пароля
  const errors = validatePassword(password);
  
  // Проверка совпадения
  if (password && confirmPassword && !checkPasswordMatch(password, confirmPassword)) {
    errors.push("Пароли не совпадают");
  }
  
  // Вывод ошибок
  if (errors.length > 0) {
    const errorList = document.createElement('ul');
    errors.forEach(error => {
      const item = document.createElement('li');
      item.textContent = error;
      errorList.appendChild(item);
    });
    errorContainer.appendChild(errorList);
    
    // Визуальные индикаторы
    passwordInput.style.borderColor = 'red';
    confirmInput.style.borderColor = 'red';
  } else {
    passwordInput.style.borderColor = 'green';
    confirmInput.style.borderColor = 'green';
  }
});

// Навешиваем обработчики
passwordInput.addEventListener('input', validateInputs);
confirmInput.addEventListener('input', validateInputs);

// Обработка отправки формы
form.addEventListener('submit', (e) => {
  e.preventDefault();
  validateInputs();
  
  // Если ошибок нет - можно отправлять
  if (errorContainer.children.length === 0) {
    form.submit();
  }
});

Дополнительные улучшения

1. Визуальный индикатор сложности пароля

function updatePasswordStrength(password) {
  const strengthIndicator = document.createElement('div');
  let strength = 0;
  
  if (password.length >= 8) strength++;
  if (/[A-Z]/.test(password)) strength++;
  if (/\d/.test(password)) strength++;
  if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength++;
  
  strengthIndicator.className = `strength-${strength}`;
  strengthIndicator.textContent = ['Слабый', 'Средний', 'Хороший', 'Надёжный'][strength - 1] || '';
  
  return strengthIndicator;
}

2. Проверка по списку слабых паролей

const weakPasswords = ['123456', 'password', 'qwerty', '111111'];

function isWeakPassword(password) {
  return weakPasswords.includes(password.toLowerCase());
}

CSS для визуального оформления

.password-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.error-messages {
  color: red;
  margin-bottom: 15px;
}

.error-messages ul {
  margin: 0;
  padding-left: 20px;
}

.form-group {
  margin-bottom: 15px;
}

input {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
}

button {
  background: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

button:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

.password-hints {
  margin-top: 15px;
  font-size: 0.9em;
  color: #666;
}

/* Индикатор сложности пароля */
.strength-1 { color: red; }
.strength-2 { color: orange; }
.strength-3 { color: #0066ff; }
.strength-4 { color: green; }

Итог

Мы рассмотрели:

• Основные требования к паролям

• Реализацию валидации на чистом JavaScript

• Проверку совпадения паролей

• Визуальную обратную связь

• Дополнительные улучшения (индикатор сложности, проверка слабых паролей)

Это решение можно расширять — добавить проверку по API Have I Been Pwned, реализовать многоязычную поддержку или интегрировать с популярными фреймворками.

Важно: Клиентская валидация — это UX-улучшение, но серверная проверка обязательна для безопасности!