Проверка надёжности пароля на JavaScript: шкала, подсказки и честные правила

Индикатор пароля должен помогать, а не обещать безопасность по одной зелёной полоске. Вы оцените длину и разнообразие, подсветите конкретные улучшения, добавите кнопку показа и оставите финальную проверку серверу.

Правило «одна заглавная, одна цифра, один символ» легко превращается в предсказуемый пароль. Для учебного индикатора мы дадим длине самый большой вес, отдельно отметим разнообразие и предупредим о частых шаблонах. Это подсказка, а не криптографическая экспертиза.

Какие признаки можно проверить в браузере

Функция evaluate принимает строку и возвращает score, label и массив hints. Интерфейс только отображает результат. Кнопка показа меняет type между password и text и обновляет aria-pressed. Вставку не блокируем: менеджеры паролей должны работать.

После этого шага у каждой части есть одна роль. Интерфейс собирает действие, логика меняет состояние, а вывод показывает признак успеха. Это проще отлаживать, чем один большой обработчик.

Пароль не покидает компонент. На сервер уходит только отправленная форма по HTTPS

Пишем оценку и живую шкалу

Эта функция намеренно проста и объяснима. Она снижает оценку для нескольких очевидных шаблонов, но не знает утечки и словари всех языков. Для серьёзного продукта используйте проверенный оценщик и серверную политику.

function evaluate(password){
  let score=0;
  const hints=[];
  if(password.length>=12) score+=2; else hints.push('Используйте не меньше 12 символов');
  if(password.length>=16) score+=1;
  if(/[a-zа-я]/.test(password)&&/[A-ZА-Я]/.test(password)) score+=1;
  else hints.push('Добавьте буквы разного регистра');
  if(/\d/.test(password)&&/[^\p{L}\d]/u.test(password)) score+=1;
  else hints.push('Добавьте цифру и специальный символ');
  if(/password|qwerty|12345|пароль/i.test(password)){score=Math.min(score,1);hints.unshift('Не используйте распространённый шаблон')}
  const labels=['Очень слабый','Слабый','Средний','Хороший','Сильный','Сильный'];
  return {score,label:labels[score],hints};
}

const input=document.querySelector('#password');
const meter=document.querySelector('#strength');
const note=document.querySelector('#hint');
input.addEventListener('input',()=>{
  const result=evaluate(input.value);
  meter.value=result.score; meter.textContent=result.score + ' из 5';
  note.textContent=input.value?(result.label + '. ' + (result.hints[0]??'Хорошая длина и разнообразие.')):'Введите пароль';
});

document.querySelector('#reveal').addEventListener('click',event=>{
  const visible=input.type==='text'; input.type=visible?'password':'text';
  event.currentTarget.setAttribute('aria-pressed',String(!visible));
  event.currentTarget.textContent=visible?'Показать':'Скрыть';
});

Помощь лучше механического запрета. Сравнение показывает, какой вариант легче поддерживать и проверять.

Почему зелёная полоска не гарантирует безопасность

Frontend-проверка видна пользователю и может быть обойдена прямым запросом. Сервер обязан повторить минимальные правила. Сам пароль нельзя логировать или хранить как обычную строку: сервер сохраняет результат специализированного медленного хеширования с солью.

Сохраняйте в одном месте то, что может измениться. Если одно и то же значение скопировано в три функции, после первой правки они начнут расходиться. Один объект состояния и одна функция отрисовки снимают эту проблему.

Практика: проверяем ввод и доступность

Проверьте пустую строку, 12 одинаковых букв, длинную фразу, qwerty12345 и вставку из менеджера паролей. Переключите видимость клавиатурой. Убедитесь, что пароль нигде не появляется в console.log, URL или тексте ошибки.

Компонент касается безопасности и доступности. Пройдите все четыре сценария перед публикацией проекта.

Доводим поле пароля до готового компонента

Следующий шаг для настоящей формы: автозаполнение current-password или new-password, серверная проверка и корректное сообщение об ошибке. Не заставляйте пользователя менять пароль по расписанию без причины и не запрещайте пробелы или вставку.

Что получится в итоге

Готовое поле показывает понятную шкалу, одну полезную подсказку и кнопку просмотра, не мешая вставке из менеджера паролей.