Mật khẩu rất quan trọng trong bảo mật ứng dụng. Mọi người đều cần một mật khẩu mạnh để bảo mật hệ thống và tài khoản của họ. Trong hướng dẫn này, chúng tôi sẽ thảo luận về cách đảm bảo rằng người dùng cuối chọn mật khẩu đủ mạnh để bảo mật tài khoản của họ bằng cách sử dụng các biểu thức thông thường trong JavaScript.
Điều kiện tiên quyết
Một sự hiểu biết cơ bản về HTML, CSS và JavaScript sẽ được yêu cầu theo dõi cùng với hướng dẫn này.
Lớp biểu thức chính quy
Biểu thức chính quy là các mẫu được sử dụng để phù hợp với kết hợp ký tự trong chuỗi. Trong JavaScript, các biểu thức chính quy cũng là đối tượng.
Regex cũng được ký hiệu là RegExp.
Chúng có thể được xây dựng bằng cách sử dụng:
- Biểu thức thông thường theo nghĩa đen trong đó mô hình được bao quanh giữa hai dấu gạch chéo.
- Chức năng tạo hàm của lớp
RegExp[]và bằng cách truyền một chuỗi phải được kiểm tra.
let check = new RegExp['vet'];
Chúng tôi sử dụng chức năng Constructor khi mẫu tiếp tục thay đổi hoặc nếu chúng tôi lấy nó từ một nguồn khác, chẳng hạn như đầu vào của người dùng. Vì lý do này, chúng tôi sẽ sử dụng chức năng Constructor vì chúng tôi sẽ nhận được mật khẩu từ người dùng.
Mô hình
| \ d | Kiểm tra một trận đấu chữ số, ví dụ: nó trả về 2 trong U2 U2. |
| \ W | Kiểm tra một ký tự đặc biệt, ví dụ: trả về % trong 2 %. |
| x {n,} | Kiểm tra ít nhất N Điều khoản N từ thuật ngữ trước x, ví dụ: o {2,} không trả lại bất cứ điều gì trong Boy Boy, nhưng trả về tất cả hệ điều hành trong GOOOOOAL !. |
| XIY | Khớp với x hoặc y trong chuỗi |
| [^Vet] | Một bộ phủ định. Không kiểm tra bất cứ điều gì trong phạm vi IE không kiểm tra bác sĩ thú y trong trò chơi thú y |
| [A-ASA-Z0-9] | Kiểm tra tất cả các ký tự chữ và số |
| [A-Z] | Kiểm tra các chữ cái viết thường |
| [A-Z] | Kiểm tra các chữ cái viết hoa |
| X [? = Y] | Trả về x khi và chỉ khi nó được theo sau bởi y |
| . | Kiểm tra bất kỳ ký tự nào ngoại trừ các đầu mối dòng |
| x* | Kiểm tra X 0 trở lên |
Regex để kiểm tra sức mạnh mật khẩu
Chúng tôi sẽ kiểm tra sức mạnh của mật khẩu mà người dùng nhập dựa trên các quy tắc sau:
Mật khẩu dài ít nhất 8 ký tự [____10].
Mật khẩu có ít nhất một chữ cái chữ hoa [
1].[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]Mật khẩu có ít nhất một chữ cái viết thường [
2].[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]Mật khẩu có ít nhất một chữ số [
3].[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]Mật khẩu có ít nhất một ký tự đặc biệt [
4].[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]
Lưu ý: Hai nhóm dấu ngoặc đơn
5 giống như kiểm tra cả X và Y trong khi hai nhóm dấu ngoặc đơn với[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]6 giữa chúng[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]7 giống như kiểm tra x hoặc y như trong bảng trên.[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]
Chúng tôi sẽ có ba cấp độ để biểu thị mức độ an toàn của mật khẩu.
Họ đang:
- Mạnh mẽ: Mật khẩu phải đáp ứng tất cả các yêu cầu.
Sử dụng các số liệu ở trên, chúng ta sẽ tạo ra một mật khẩu cấp độ mạnh có ít nhất một chữ cái viết thường [
[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]
[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]
[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]
[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]
[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]
- Trung bình: Nếu mật khẩu dài ít nhất sáu ký tự và đáp ứng tất cả các yêu cầu khác hoặc không có chữ số nhưng đáp ứng các yêu cầu còn lại.
Mã này giống như ở cấp độ mạnh chỉ là
[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]
[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]
[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]
[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]
[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]
- Yếu: Nếu mật khẩu nhập không đáp ứng các yêu cầu cấp độ mạnh hoặc trung bình, thì nó được coi là yếu.
Mã HTML
.passwordInput{
margin-top: 5%;
text-align :center;
}
.displayBadge{
margin-top: 5%;
display: none;
text-align :center;
}
Password Strength Checker
Weak
Chúng tôi sẽ sử dụng Bootstrap 5 để tạo kiểu bằng cách thêm liên kết CDN cho bảng kiểu bootstrap và liên kết nó với tệp HTML bằng thẻ
7.[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]Chúng tôi sẽ viết các kiểu tùy chỉnh của chúng tôi bằng thẻ
8. Chúng tôi có hai lớp,[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]
9 và[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]
0..passwordInput{ margin-top: 5%; text-align :center; } .displayBadge{ margin-top: 5%; display: none; text-align :center; } Password Strength Checker Weak
9 kiểu đầu vào mật khẩu bằng cách cho phép tỷ suất lợi nhuận 5% từ đầu và cũng sắp xếp văn bản được gõ vào nó ở trung tâm.[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]
0 làm tương tự cho nhịp và ẩn nó vì chúng tôi chỉ hiển thị nó khi người dùng bắt đầu nhập mật khẩu..passwordInput{ margin-top: 5%; text-align :center; } .displayBadge{ margin-top: 5%; display: none; text-align :center; } Password Strength Checker WeakTrong thẻ
3, chúng tôi có phần tử.passwordInput{ margin-top: 5%; text-align :center; } .displayBadge{ margin-top: 5%; display: none; text-align :center; } Password Strength Checker Weak
4 với ba phần tử..passwordInput{ margin-top: 5%; text-align :center; } .displayBadge{ margin-top: 5%; display: none; text-align :center; } Password Strength Checker WeakYếu tố đầu tiên là một tiêu đề đơn giản [
5] với một số kiểu nội tuyến..passwordInput{ margin-top: 5%; text-align :center; } .displayBadge{ margin-top: 5%; display: none; text-align :center; } Password Strength Checker WeakPhần tử thứ hai là một đầu vào mà người dùng sẽ nhập mật khẩu. Chúng tôi đã sử dụng lớp
6 từ Bootstrap và lớp tùy chỉnh.passwordInput{ margin-top: 5%; text-align :center; } .displayBadge{ margin-top: 5%; display: none; text-align :center; } Password Strength Checker Weak
9 của chúng tôi để tạo kiểu cho phần tử.[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]Yếu tố thứ ba là
8, nơi cường độ mật khẩu sẽ được dán nhãn là huy hiệu có màu: Màu xanh lá cây cho mạnh mẽ, xanh dương cho trung bình và màu đỏ cho yếu..passwordInput{ margin-top: 5%; text-align :center; } .displayBadge{ margin-top: 5%; display: none; text-align :center; } Password Strength Checker Weak
Mã JavaScript
Hãy để tạo ra năm biến:
9: Để tham khảo thời gian chờ trước khi gọi lại..passwordInput{ margin-top: 5%; text-align :center; } .displayBadge{ margin-top: 5%; display: none; text-align :center; } Password Strength Checker Weak
0: Đối với đầu vào nơi mật khẩu sẽ được nhập.let timeout; let password = document.getElementById['PassEntry']; let strengthBadge = document.getElementById['StrengthDisp']; let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]'] let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
1: Để lưu trữ nhịp được sử dụng để hiển thị cường độ của mật khẩu [chúng ta có thể truy cập bằng ID phần tử DOM].let timeout; let password = document.getElementById['PassEntry']; let strengthBadge = document.getElementById['StrengthDisp']; let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]'] let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
2: Để lưu trữ các điều kiện Regex.let timeout; let password = document.getElementById['PassEntry']; let strengthBadge = document.getElementById['StrengthDisp']; let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]'] let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
3: Cũng được sử dụng để lưu trữ các điều kiện Regex.let timeout; let password = document.getElementById['PassEntry']; let strengthBadge = document.getElementById['StrengthDisp']; let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]'] let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
let timeout;
let password = document.getElementById['PassEntry'];
let strengthBadge = document.getElementById['StrengthDisp'];
let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]']
let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
Hãy để tạo ra một hàm gọi là
let timeout;
let password = document.getElementById['PassEntry'];
let strengthBadge = document.getElementById['StrengthDisp'];
let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]']
let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
let timeout;
let password = document.getElementById['PassEntry'];
let strengthBadge = document.getElementById['StrengthDisp'];
let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]']
let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
let timeout;
let password = document.getElementById['PassEntry'];
let strengthBadge = document.getElementById['StrengthDisp'];
let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]']
let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
let timeout;
let password = document.getElementById['PassEntry'];
let strengthBadge = document.getElementById['StrengthDisp'];
let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]']
let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
Sau đó, hãy để Lừa đặt màu nền [
let timeout;
let password = document.getElementById['PassEntry'];
let strengthBadge = document.getElementById['StrengthDisp'];
let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]']
let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
let timeout;
let password = document.getElementById['PassEntry'];
let strengthBadge = document.getElementById['StrengthDisp'];
let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]']
let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
function StrengthChecker[PasswordParameter] {
if[strongPassword.test[PasswordParameter]] {
strengthBadge.style.backgroundColor = "green";
strengthBadge.textContent = 'Strong';
} else if[mediumPassword.test[PasswordParameter]] {
strengthBadge.style.backgroundColor = 'blue';
strengthBadge.textContent = 'Medium';
} else {
strengthBadge.style.backgroundColor = 'red';
strengthBadge.textContent = 'Weak';
}
}
Hãy để thêm một trình nghe sự kiện đầu vào vào đầu vào
let timeout;
let password = document.getElementById['PassEntry'];
let strengthBadge = document.getElementById['StrengthDisp'];
let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]']
let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
let timeout;
let password = document.getElementById['PassEntry'];
let strengthBadge = document.getElementById['StrengthDisp'];
let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]']
let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
Chúng ta nên xóa thời gian chờ trước đó nếu có bất kỳ. Khi các sự kiện xảy ra gần nhau hơn thời gian chờ của chúng tôi, thời gian chờ từ sự kiện đầu vào trước sẽ bị hủy.
password.addEventListener["input", [] => {
strengthBadge.style.display = 'block';
clearTimeout[timeout];
timeout = setTimeout[[] => StrengthChecker[password.value], 500];
if[password.value.length !== 0] {
strengthBadge.style.display != 'block';
} else {
strengthBadge.style.display = 'none';
}
}];
Mã JavaScript đầy đủ
Thay vì viết nội tuyến JavaScript với tệp HTML, chúng tôi sẽ tạo một tệp JavaScript mới, viết mã sau và sau đó liên kết nó với HTML bằng thẻ tập lệnh như
function StrengthChecker[PasswordParameter] {
if[strongPassword.test[PasswordParameter]] {
strengthBadge.style.backgroundColor = "green";
strengthBadge.textContent = 'Strong';
} else if[mediumPassword.test[PasswordParameter]] {
strengthBadge.style.backgroundColor = 'blue';
strengthBadge.textContent = 'Medium';
} else {
strengthBadge.style.backgroundColor = 'red';
strengthBadge.textContent = 'Weak';
}
}
// timeout before a callback is called
let timeout;
// traversing the DOM and getting the input and span using their IDs
let password = document.getElementById['PassEntry']
let strengthBadge = document.getElementById['StrengthDisp']
// The strong and weak password Regex pattern checker
let strongPassword = new RegExp['[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{8,}]']
let mediumPassword = new RegExp['[[?=.*[a-z]][?=.*[A-Z]][?=.*[0-9]][?=.*[^A-Za-z0-9]][?=.{6,}]]|[[?=.*[a-z]][?=.*[A-Z]][?=.*[^A-Za-z0-9]][?=.{8,}]]']
function StrengthChecker[PasswordParameter]{
// We then change the badge's color and text based on the password strength
if[strongPassword.test[PasswordParameter]] {
strengthBadge.style.backgroundColor = "green"
strengthBadge.textContent = 'Strong'
} else if[mediumPassword.test[PasswordParameter]]{
strengthBadge.style.backgroundColor = 'blue'
strengthBadge.textContent = 'Medium'
} else{
strengthBadge.style.backgroundColor = 'red'
strengthBadge.textContent = 'Weak'
}
}
// Adding an input event listener when a user types to the password input
password.addEventListener["input", [] => {
//The badge is hidden by default, so we show it
strengthBadge.style.display= 'block'
clearTimeout[timeout];
//We then call the StrengChecker function as a callback then pass the typed password to it
timeout = setTimeout[[] => StrengthChecker[password.value], 500];
//Incase a user clears the text, the badge is hidden again
if[password.value.length !== 0]{
strengthBadge.style.display != 'block'
} else{
strengthBadge.style.display = 'none'
}
}];
Sự kết luận
Bạn đã học cách sử dụng JavaScript Regex để tạo trình kiểm tra mật khẩu ba cấp. Bạn có thể xây dựng trên ví dụ bằng cách thực hiện nhiều cấp độ hơn như quá mạnh và quá yếu.
Để tìm hiểu thêm về JavaScript Regex, hãy đọc các tài liệu MDN.
Cảm ơn vì đã đọc!
Đóng góp đánh giá ngang hàng của: Mohan Raj