Топ плагинов jQuery. Плагин для проверки пароля на сложность

Топ плагинов jQuery. Плагин для проверки пароля на сложность

От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с плагином, позволяющим визуализировать проверку пароля на сложность. Плагин jQuery проверка пароля подскажет пользователю, заполняющему поле пароля, насколько его пароль сложен и устойчив к взлому.

Подобных плагинов jQuery для проверки пароля на сложность можно найти достаточно много. В данной статье мы поработаем с плагином jQuery проверка пароля под названием Entropizer. Работает он по тому же принципу, что и большинство его аналогов: есть поле для ввода пароля, рядом с которым располагается некий индикатор сложности пароля. В процессе ввода пароля этот индикатор меняется, показывая сложность пароля и, соответственно, его устойчивость к подбору и взлому.

Как обычно, начнем с подключения необходимых для работы файлов плагина jQuery проверка пароля:

<link href="css/jquery-entropizer.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="lib/entropizer.js"></script>
<script src="js/jquery-entropizer.js"></script>

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

<input type="password" class="form-control" id="password" placeholder="Password">
<div id="meter"></div>

Теперь вызовем метод entropizer(), передав ему в качестве параметра идентификатор поля, к которому будет привязан индикатор.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
$(function(){
 $('#meter').entropizer({
  target: '#password'
 });
});

В результате мы увидим примерно следующую картину:

Топ плагинов jQuery. Плагин для проверки пароля на сложность

Теперь если начать вводить пароль — индикатор сложности пароля начнет изменять с каждым введенным символом.

Топ плагинов jQuery. Плагин для проверки пароля на сложность

Плагин jQuery проверка пароля поддерживает дополнительные опции. Например, вы вполне можете захотеть изменить определения сложности пароля, которые по умолчанию следующие: poor, ok, good и excellent. Давайте поменяем их на что-то свое. Для этого достаточно обратиться к опции buckets:

$(function(){
 $('#meter').entropizer({
  target: '#password',
  buckets: [
 { max: 45, strength: 'слабый', color: '#e13' },
 { min: 45, max: 60, strength: 'подойдет', color: '#f80' },
 { min: 60, max: 75, strength: 'хороший', color: '#8c0' },
 { min: 75, strength: 'отличный', color: '#0c8' }
  ]
 });
});

Топ плагинов jQuery. Плагин для проверки пароля на сложность

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

Ну и, наконец, я хочу оставить только словесную оценку, убрав баллы в скобках. Это можно сделать следующим кодом:

$(function(){
 $('#meter').entropizer({
  target: '#password',
  buckets: [
 { max: 45, strength: 'слабый', color: '#e13' },
 { min: 45, max: 60, strength: 'подойдет', color: '#f80' },
 { min: 60, max: 75, strength: 'хороший', color: '#8c0' },
 { min: 75, strength: 'отличный', color: '#0c8' }
  ],
  update: function(data, ui) {
 ui.bar.css({
 'background-color': data.color,
 'width': data.percent + '%'
 });
 ui.text.html(data.strength);
  },
 });
});

Топ плагинов jQuery. Плагин для проверки пароля на сложность

Как видите, работа с плагином jQuery проверка пароля для оценки сложности пароля — предельно проста. На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree