Hướng dẫn simple password strength checker javascript - javascript kiểm tra độ mạnh mật khẩu đơn giản
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. Show Điều kiện tiên quyếtMộ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 quyBiể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à Chúng có thể được xây dựng bằng cách sử dụng:
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
Regex để kiểm tra sức mạnh mật khẩuChú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:
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:
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 ( 2), một chữ hoa ( 1), một chữ số ( 3), một ký tự đặc biệt ( 1) và ít nhất là tám chữ ký tự dài (____ 10).
Mã này giống như ở cấp độ mạnh chỉ là 3 cho thấy chúng tôi đang kiểm tra ít nhất sáu ký tự. Nó cũng có 6 để kiểm tra một trong hai điều kiện 5 hoặc 6.
Mã HTML
Mã JavaScriptHãy để tạo ra năm biến:
Hãy để tạo ra một hàm gọi là 4 trong đó chúng tôi kiểm tra độ bền của mật khẩu bằng cách sử dụng các biểu thức thông thường mà chúng tôi đã viết với phương thức 5. Nó trả về 6 nếu có trận đấu hoặc 7 nếu không có khớp.Sau đó, hãy để Lừa đặt màu nền ( 8) và văn bản của huy hiệu ( 9) theo kết quả.
Hãy để thêm một trình nghe sự kiện đầu vào vào đầu vào 0 và kiểm tra cường độ với chức năng 4 khi người dùng đã nhập một cái gì đó. Chúng tôi đã thắng cuộc gọi chức năng ngay sau mỗi lần nhấn phím. Khi người dùng gõ nhanh chóng, chúng ta nên đợi cho đến khi xảy ra tạm dừng. Vì vậy, thay vì kiểm tra sức mạnh ngay lập tức, chúng tôi sẽ đặt thời gian chờ.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.
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ư 2.
Sự kết luậnBạ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 |