Bảo mật web đang ngày càng trở thành vấn đề quan trọng nhất cho việc quản lý website. Nếu các bạn đang có ý định tự tay xây dựng hệ thống cho phép người dùng có thể tạo password, thì chức năng hiển thị thông báo độ mạnh bảo mật đối với password mà họ vừa mới nhập luôn luôn là một chức năng hữu ích và cần thiết. Nó sẽ giúp ích rất nhiều cho việc tạo độ an toàn mật khẩu.
Trong bài viết này, mình sẽ chia sẻ cho các bạn từng bước tạo chức năng kiểm tra độ an toàn mật khẩu bằng cách sử dụng jQuery.
Bước 1 : HTML Form
Đầu tiên chúng ta sẽ cần một form cho phép người dùng nhập mật khẩu như sau :
<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>
Các bạn chú ý thẻ div với id là passwordStrength sẽ là nơi mà chúng ta hiển thị thông báo độ mạnh của mật khẩu.
Bước 2 : jQuery
Chúng ta sẽ cần dùng regular expression để kiểm tra dữ liệu người dùng và so sánh để có thể đưa ra là mật khẩu đó có an toàn hay không. Và sau đây là mức độ bảo mật được định nghĩa như sau :
Strong Password
// Phải chứa kí tự là chữ hoa, số, kí tự gạch dưới hoặc kí tự đặc biệt như $...
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
Medium Password
// Phải chứa một trong những chữ hoa, chữ thường hoặc số
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
Weak Password
// Độ dài mật khẩu phải chứa ít nhất là 6 kí tự
var okRegex = new RegExp("(?=.{6,}).*", "g");
Và sau đây là toàn bộ code giúp các bạn tạo chức năng kiểm tra độ mạnh mật khẩu như sau :
$(document).ready(function() {
$('#passwordInput, #confirmPasswordInput').on('keyup', function(e) {
if($('#passwordInput').val() == '' && $('#confirmPasswordInput').val() == '')
{
$('#passwordStrength').removeClass().html('');
return false;
}
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;
});
});
Các bạn có thể tự đưa ra thuật toán để tính độ mạnh mật khẩu theo ý mình, không nhất thiết phải làm theo như ở trên.