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

360

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

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

Як завжди, почнемо з підключення необхідних для роботи файлів плагіна jQuery перевірка пароля:

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

Тепер викличемо метод 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 ви можете дізнатися з наших уроків або курсу. Удачі!