Статьи

Индикатор надежности пароля с помощью jQuery

Август 20, 2018

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

Если вы создаете систему, которая позволяет пользователю вводить свой собственный пароль, то всегда полезно дать им представление о том, насколько безопасен их пароль.

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

Демонстрация надежности пароля jQuery

Форма HTML

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

<form action="" method="post">
<p><label for="passwordInput">Password: <input type="password" id="passwordInput" name="passwordInput"></label></p>
<p><label for="confirmPasswordInput">Confirm Password: <input type="password" id="confirmPasswordInput" name="confirmPasswordInput"></label></p>
<p><div class="" id="passwordStrength"></div></p>
<p><input type="submit" value="Change Password" class="btn"></p>
</form>

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

Надежность пароля JQuery

Здесь мы создаем наш фрагмент jQuery для проверки надежности пароля.

Есть несколько вещей, которые мы должны проверить, когда мы оцениваем пароль.

  • Нам нужно убедиться, что пароль и пароль подтверждения совпадают.
  • Нам нужно убедиться, что пароль имеет длину не менее 6 символов.
  • Если пароль более 6 символов без заглавных букв или цифр, это слабый пароль.
  • Если пароль содержит более 6 символов с заглавной буквой или цифрами, это средний пароль.
  • Если пароль содержит более 6 символов с заглавными буквами, цифрами и специальными символами, то это надежный пароль.

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

Сначала нам нужно начать с проверки, если пароль и подтвердить совпадение пароля, если они не совпадают, то пользователь допустил ошибку при вводе пароля, поэтому нет необходимости проверять надежность пароля, если он неверный ,

Как только эти два поля пароля совпадают, мы можем проверить надежность пароля, что делается с помощью следующих регулярных выражений.

Надежный пароль

// Must have capital letter, numbers and lowercase letters
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

Средний пароль

// Must have either capitals and lowercase letters or lowercase and numbers
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

Слабый пароль

// Must be at least 6 characters long
var okRegex = new RegExp("(?=.{6,}).*", "g");

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

Ниже приведен фрагмент кода проверки надежности пароля.

 $(document).ready(function() {
 
$('#passwordInput, #confirmPasswordInput').on('keyup', function(e) {
 
if($('#passwordInput').val() != '' && $('#confirmPasswordInput').val() != '' && $('#passwordInput').val() != $('#confirmPasswordInput').val())
{
$('#passwordStrength').removeClass().addClass('alert alert-error').html('Passwords do not match!');
 
return false;
}
 
// Must have capital letter, numbers and lowercase letters
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
 
// Must have either capitals and lowercase letters or lowercase and numbers
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
 
// Must be at least 6 characters long
var okRegex = new RegExp("(?=.{6,}).*", "g");
 
if (okRegex.test($(this).val()) === false) {
// If ok regex doesn't match the password
$('#passwordStrength').removeClass().addClass('alert alert-error').html('Password must be 6 characters long.');
 
} else if (strongRegex.test($(this).val())) {
// If reg ex matches strong password
$('#passwordStrength').removeClass().addClass('alert alert-success').html('Good Password!');
} else if (mediumRegex.test($(this).val())) {
// If medium password matches the reg ex
$('#passwordStrength').removeClass().addClass('alert alert-info').html('Make your password stronger with more capital letters, more numbers and special characters!');
} else {
// If password is ok
$('#passwordStrength').removeClass().addClass('alert alert-error').html('Weak Password, try using numbers and capital letters.');
}
return true;
});
 
});

Чтобы увидеть это в действии, вы можете увидеть демонстрационную страницу, чтобы убедиться, что ваши пароли надежны.

Демонстрация надежности пароля jQuery

46
Share: