От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с плагином, позволяющим визуализировать проверку пароля на сложность. Плагин jQuery проверка пароля подскажет пользователю, заполняющему поле пароля, насколько его пароль сложен и устойчив к взлому.
Подобных плагинов jQuery для проверки пароля на сложность можно найти достаточно много. В данной статье мы поработаем с плагином jQuery проверка пароля под названием Entropizer. Работает он по тому же принципу, что и большинство его аналогов: есть поле для ввода пароля, рядом с которым располагается некий индикатор сложности пароля. В процессе ввода пароля этот индикатор меняется, показывая сложность пароля и, соответственно, его устойчивость к подбору и взлому.
Как обычно, начнем с подключения необходимых для работы файлов плагина jQuery проверка пароля:
|
1 2 3 4 |
<link href="css/jquery-entropizer.css" rel="stylesheet"> <script src="//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> |
После этого нам потребуется поле формы для ввода пароля и пустой блок, в который и будет размещаться индикатор проверки пароля на сложность.
|
1 2 |
<input type="password" class="form-control" id="password" placeholder="Password"> <div id="meter"></div> |
Теперь вызовем метод entropizer(), передав ему в качестве параметра идентификатор поля, к которому будет привязан индикатор.
|
1 2 3 4 5 |
$(function(){ $('#meter').entropizer({ target: '#password' }); }); |
В результате мы увидим примерно следующую картину:
Теперь если начать вводить пароль — индикатор сложности пароля начнет изменять с каждым введенным символом.
Плагин jQuery проверка пароля поддерживает дополнительные опции. Например, вы вполне можете захотеть изменить определения сложности пароля, которые по умолчанию следующие: poor, ok, good и excellent. Давайте поменяем их на что-то свое. Для этого достаточно обратиться к опции buckets:
|
1 2 3 4 5 6 7 8 9 10 11 |
$(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' } ] }); }); |
Как вы уже догадались, вместо четырех вариантов мы можем использовать другое количество оценок пароля. Также можем при необходимости поменять и цвет индикатора для той или иной оценки.
Ну и, наконец, я хочу оставить только словесную оценку, убрав баллы в скобках. Это можно сделать следующим кодом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(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 и JavaScript вы можете узнать из наших уроков или курса. Удачи!
