Від автора: і знову здрастуйте. Дозвольте представити вам черговий плагін з розряду must have. Сьогодні ми познайомимося з плагіном, що дозволяє візуалізувати перевірку пароля на складність. Плагін jQuery перевірка пароля підкаже користувачеві, яка заповнює поле пароля, наскільки його пароль складний і стійкий до злому.
Подібних плагінів jQuery для перевірки пароля на складність можна знайти досить багато. У даній статті ми попрацюємо з плагіном jQuery перевірка пароля під назвою Entropizer. Працює він за тим же принципом, що і більшість його аналогів: є поле для введення пароля, поруч з яким розташовується якийсь індикатор складності пароля. В процесі введення пароля цей індикатор змінюється, показуючи складність пароля і, відповідно, його стійкість до підбору і злому.
Як завжди, почнемо з підключення необхідних для роботи файлів плагіна jQuery перевірка пароля:
Після цього нам буде потрібно поле форми для введення пароля і порожній блок, в який і буде розміщуватися індикатор перевірки пароля на складність.
Тепер викличемо метод entropizer(), передавши йому в якості параметра ідентифікатор поля, до якого буде прив’язана індикатор.
$(function(){
$(‘#meter’).entropizer({
target: ‘#password’
});
});
В результаті ми побачимо приблизно наступну картину:
Тепер якщо почати вводити пароль — індикатор складності почне змінювати з кожним введеним символом.
Плагін 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’ }
]
});
});
Як ви вже здогадалися, замість чотирьох варіантів ми можемо використовувати іншу кількість оцінок пароля. Також можемо при необхідності поміняти колір індикатора для тієї чи іншої оцінки.
Ну і, нарешті, я хочу залишити лише словесну оцінку, прибравши бали в дужках. Це можна зробити наступним кодом:
$(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 ви можете дізнатися з наших уроків або курсу. Удачі!