Cách tạo mật khẩu ngẫu nhiên trong javascript?
Trong hướng dẫn này, chúng ta sẽ xem cách xây dựng một trình tạo mật khẩu hoàn toàn bằng vanilla JavaScript. Chúng tôi sẽ xem xét triển khai các tính năng sau ✨ Show
Nếu bạn chỉ quan tâm đến phần tạo mật khẩu, hãy truy cập kho lưu trữ GitHub Để đạt được điều này, tất nhiên chúng ta sẽ cần một thiết kế. Đối với dự án này, chúng tôi sẽ sử dụng thiết kế sau từ Dribbble Tuy nhiên, chúng tôi sẽ thay đổi một vài điều ở đây và ở đó. Đầu tiên, chúng tôi sẽ không cần hộp kiểm chữ thường, vì chúng sẽ được bao gồm theo mặc định. Thứ hai, chúng tôi cũng sẽ không cần nút đóng vì đây sẽ không phải là cửa sổ bật lên mà là toàn bộ ứng dụng. Và cuối cùng, chúng tôi sẽ giới hạn độ dài của mật khẩu. Chúng tôi sẽ chỉ cho phép tạo mật khẩu có ít nhất 5 ký tự và không quá 20. Tất nhiên, bạn có thể dễ dàng cấu hình điều này theo nhu cầu của riêng bạn. Vì vậy, hãy bắt đầu viết mã và thiết lập dự án Tìm cách để cải thiện kỹ năng của bạn? Thiết lập dự ánChúng tôi sẽ cần ba tệp khác nhau. Một 5 cho phần đánh dấu, một 6 cho các kiểu và một 7 cho phần JavaScript. Vì hướng dẫn này chủ yếu tập trung vào JavaScript, nên tôi sẽ bỏ qua phần CSS, nhưng bạn có thể tìm thấy các kiểu có liên quan trong kho lưu trữ GitHubTrước tiên hãy xem chúng ta cần đánh dấu gì, sau đó chúng ta sẽ đi sâu vào triển khai chức năng trong JavaScript chỉ mục. html Đừng quên bao gồm các tài nguyên của bạnĐã sao chép vào khay nhớ tạm. Sao chép Lưu ý rằng chúng tôi đang sử dụng thuộc tính 8. Chúng tôi sẽ sử dụng những thứ này trong JavaScript để lấy các phần tử DOM có liên quan cho các sự kiện của người dùng. Tốt nhất là bạn muốn tránh sử dụng các lớp cho bộ chọn, vì chúng có thể thay đổi và chúng dùng để tạo kiểu. Bằng cách này, rõ ràng đó là bộ chọn dành riêng cho JavaScriptMột điều quan trọng mà tôi muốn chỉ ra từ phía CSS, đó là đảm bảo rằng bạn thêm 9 vào các hộp kiểm bên trong nhãn để luôn đăng ký sự kiện nhấp chuột trên chính nhãn đó. Ngoài ra, hãy đảm bảo rằng bạn đặt thẻ 0 trước khi đóng thẻ body của mình để khi JavaScript được tải, chúng tôi đã có quyền truy cập vào các phần tử DOM. Không có gì khó chịu nữa, hãy xem phần JavaScriptThiết lập cấu hìnhĐầu tiên, chúng tôi muốn thiết lập một số cờ boolean mà sau này chúng tôi có thể sử dụng để quyết định cách chúng tôi muốn tạo mật khẩu. Điều này bao gồm những thứ như liệu chúng tôi muốn sử dụng một số ký tự nhất định hay độ dài của mật khẩu. Chúng ta có thể lưu trữ cái này trong một đối tượng cấu hình ứng dụng. jsĐã sao chép vào khay nhớ tạm. Sao chép Về cơ bản, chúng tôi có một cờ cho mọi đầu vào có thể thay đổi đầu ra của mật khẩu được tạo cuối cùng. Chúng tôi cũng có thể làm điều tương tự với các bộ chọn để sau này nếu chúng tôi phải thay đổi chúng, chúng tôi chỉ cần thực hiện ở một nơi Thêm danh sách bộ chọn sau cờĐã sao chép vào khay nhớ tạm. Sao chép Lưu ý rằng chúng tôi chỉ sử dụng 1 cho hai phần tử, phần còn lại đang sử dụng các chuỗi đơn giản. Điều này là do mọi thứ là một chuỗi, chúng tôi sẽ cho rằng nó đang tham chiếu đến một thuộc tính 8 được sử dụng để tương tác với người dùngTìm cách để cải thiện kỹ năng của bạn? Thêm người nghe sự kiệnVì chúng tôi muốn chia sẻ cùng một logic cho nhiều trình xử lý sự kiện, chúng tôi sẽ chỉ thêm một trình xử lý sự kiện vào thư mục gốc của ứng dụng và ủy quyền sự kiện cho các phần tử cần thiết. Đối với điều này, chúng ta có thể sử dụng câu lệnh 3, sử dụng thuộc tính 8
Đã sao chép vào khay nhớ tạm. Sao chép Chúng tôi sẽ triển khai các trình lắng nghe sự kiện cần thiết trong từng trường hợp. Nó chuyển đổi giữa thuộc tính 8 và lấy thuộc tính bên phải từ đối tượng 6 mà chúng ta đã xác định ở trên. Trước tiên, hãy tạo trình xử lý sự kiện cho các hộp kiểm vì điều này sẽ chỉ yêu cầu một dòng mã Đảm bảo bạn phủ nhận thuộc tính đã chọn để sử dụng giá trị được cập nhậtĐã sao chép vào khay nhớ tạm. Sao chép Tất cả những gì chúng tôi đang làm ở đây là cập nhật một trong các cờ dựa trên việc hộp kiểm có được chọn hay không. Chúng ta có thể lấy hộp kiểm bằng cách tham khảo 7 (thuộc tính 8 của hộp kiểm). Lưu ý rằng 9 đang tham chiếu nhãn. Mỗi nhãn có thể có một điều khiển mà chúng ta có thể kết nối bằng cách sử dụng thuộc tính 0 trong HTML. Và điều này sẽ tham chiếu đầu vào mà chúng tôi nhận được 8 Nhãn được kết nối với đầu vào bằng thuộc tính for (phải khớp với id)Đã sao chép vào khay nhớ tạm. Sao chép Vì vậy, ví dụ: khi chúng tôi kiểm tra "Biểu tượng" sẽ được sử dụng, điều này sẽ chuyển thành như sau
Đã sao chép vào khay nhớ tạm. Sao chép Nếu bây giờ chúng ta đánh dấu vào các hộp kiểm và ghi các giá trị của đối tượng flags vào bảng điều khiển, chúng ta có thể thấy rằng bất cứ khi nào chúng ta đánh dấu vào một hộp kiểm, giá trị của nó sẽ được cập nhật tương ứng. Điều này sẽ cho phép chúng tôi sử dụng chúng, sau này, để quyết định cách tạo mật khẩu Thêm trình xử lý sự kiện cho thanh trượtTiếp theo, chúng ta có thanh trượt. Sẽ hơi khác một chút đối với các hộp kiểm vì chúng tôi không làm việc với các giá trị boolean mà với một số. Ở đây, chúng tôi không chỉ muốn cập nhật cờ cần thiết mà còn muốn cập nhật giao diện người dùng, hiển thị độ dài hiện tại của mật khẩu. Dựa trên điều này, chúng tôi nhận được những điều sau đây Cập nhật trạng thái và giao diện người dùng khi thanh trượt được di chuyểnĐã sao chép vào khay nhớ tạm. Sao chép Chúng ta có thể lấy giá trị của thanh trượt dưới dạng số bằng cách sử dụng thuộc tính 2 trên sự kiện đích, sau đó chỉ định giá trị này để cập nhật cả trạng thái và giao diện người dùngSao chép mật khẩuChúng ta chỉ còn hai việc phải làm. Tự tạo mật khẩu, sau đó thêm chức năng sao chép, chức năng này sẽ cho phép chúng tôi sao chép mã vào khay nhớ tạm bằng một cú nhấp chuột. Hãy bắt đầu với phần sau vì việc tạo mã sẽ cần thêm một chút giải thích. Sao chép nội dung vào khay nhớ tạm trong JavaScript có thể đạt được theo cách sau
Đã sao chép vào khay nhớ tạm. Sao chép Vì vậy, những gì chính xác xảy ra ở đây? . Đó là tất cả những gì chúng ta cần để sao chép văn bản vào khay nhớ tạm. Bây giờ hãy tập trung sự chú ý của chúng tôi vào việc tạo mật khẩu Tạo mật khẩuĐối với phần này, chúng ta có thể tạo một chức năng mới và thuê ngoài logic ở đó, điều đó có nghĩa là chúng ta thực sự có thể thoát khỏi một dòng mã cho trình xử lý sự kiện
Đã sao chép vào khay nhớ tạm. Sao chép Chúng tôi đặt giá trị của trường đầu vào thành giá trị trả về của hàm 5. Vậy hàm này trả về cái gì? . Để tạo mật khẩu, trước tiên chúng ta cần biết những ký tự nào có sẵn để sử dụng. Đối với điều này, chúng ta có thể tạo đối tượng sau 0Đã sao chép vào khay nhớ tạm. Sao chép Theo mặc định, chúng ta sẽ bắt đầu với các chữ cái trong bảng chữ cái tiếng Anh viết thường. Chúng ta có thể gọi 6 trên chuỗi này để lấy phiên bản chữ hoa của các chữ cái. Đảm bảo rằng bạn cũng xác định phần còn lại của các ký tự có thể có dưới dạng chuỗi, vì ý tưởng là lấy ngẫu nhiên một giá trị từ chuỗi này. Chúng tôi cũng có thể xác định một danh sách các ký hiệu ngẫu nhiên để cung cấp chúngVì vậy, dựa trên danh sách các ký tự này và dựa trên các cờ hiện đang hoạt động, chúng tôi muốn tạo phiên bản cuối cùng của chuỗi để chúng tôi biết ký tự nào khả dụng khi chúng tôi thực hiện phần tạo. Điều này có nghĩa là nếu các số được đăng ký, chúng ta sẽ nhận được chuỗi sau 1Và như thế. Vậy làm cách nào để tạo chuỗi cuối cùng dựa trên các cờ? 2Đã sao chép vào khay nhớ tạm. Sao chép Điều này bao gồm danh sách ký tự mặc định theo mặc định (chữ thường của bảng chữ cái tiếng Anh) và tùy chọn, chúng tôi có thể thêm phần còn lại của ký tự nếu cờ của chúng được đặt thành true. Đối với điều này, chúng ta có thể sử dụng toán tử trải rộng với một bộ ba được kết hợp, để thêm nó hoặc thêm một mảng trống. Do cách thức hoạt động của trải rộng, nếu một trong các cờ là 7, thì mảng trống cũng sẽ được trải rộng, nghĩa là sẽ không có gì được thêm vào. Sau đó, chúng ta có thể nối chuỗi này lại với nhau thành một chuỗi bằng cách sử dụng 8Điều cuối cùng cần làm là thực sự trả lại mật khẩu từ hàm. Đối với điều này, chúng tôi sẽ điền vào một mảng bằng độ dài của mật khẩu và chúng tôi chọn ngẫu nhiên một ký tự từ danh sách ký tự. Đối với điều này, chúng ta có thể sử dụng công thức sau 3Đã sao chép vào khay nhớ tạm. Sao chép Đầu tiên, chúng ta cần tạo một mảng. Chúng ta có thể làm điều này bằng cách sử dụng 9. Nó chấp nhận một cấu hình là tham số đầu tiên mà chúng ta có thể đặt độ dài của mảng. Chúng tôi muốn độ dài khớp với độ dài của mật khẩu, vì vậy chúng tôi có thể chuyển 0 vào đâyTham số thứ hai là hàm gọi lại xác định giá trị của từng phần tử bên trong mảng là gì. Ở đây chúng tôi đang lấy một chỉ mục ngẫu nhiên từ 1 bằng cách sử dụng 2. Đừng quên rằng chúng ta cần sàn số này để có được một số nguyên. Khi kết thúc phần này, chúng ta sẽ có một mảng với danh sách các số ngẫu nhiên 4Đã sao chép vào khay nhớ tạm. Sao chép Bây giờ chúng ta có một danh sách các chỉ mục ngẫu nhiên, chúng ta có thể chọn ký tự thích hợp từ danh sách ký tự bằng cách sử dụng bản đồ, sau đó nối mọi thứ lại với nhau thành một chuỗi. Điều này có nghĩa là chúng tôi sẽ nhận được mật khẩu đã tạo và cùng với đó, thông tin sau Tìm cách để cải thiện kỹ năng của bạn? Tóm lượcVà bây giờ bạn vừa tạo trình tạo mật khẩu đầu tiên của mình bằng vanilla JavaScript. 🎉 Nếu bạn muốn lấy mã nguồn nguyên vẹn của ứng dụng này, bạn có thể sao chép nó từ kho lưu trữ GitHub của nó. Nếu bạn đang tìm kiếm thêm ý tưởng dự án JavaScript, tôi khuyên bạn nên xem bài viết bên dưới. Cảm ơn bạn đã đọc qua. Tiếp tục mã hóa. 👨💻 100 ý tưởng dự án JavaScriptTừ Junior đến SeniorBạn đang tìm kiếm dự án JavaScript tiếp theo của mình để đảm nhận?Làm cách nào để tạo mật khẩu mạnh trong JavaScript?Thật đơn giản, để làm cho mật khẩu của bạn mạnh, bạn phải sử dụng bảng chữ cái viết hoa và viết thường, một số số và ký tự đặc biệt . Kiểm tra những ví dụ này. javascript123 là mật khẩu rất yếu, javascript@123 có độ mạnh trung bình và JavaScript@123 mạnh.
Làm cách nào để tạo các ký tự đặc biệt trong JavaScript?Tạo các ký tự đặc biệt ngẫu nhiên bằng JavaScript . hàm getRandom Character(độ dài kết quả var = ''; biểu tượng var = ". @#$ %^&*(){}[]=<>/. " cho ( var i = 0; i < chiều dài kết quả += ký hiệu. charAt( sàn(Toán. ngẫu nhiên () * biểu tượng. chiều dài)); trả về kết quả; getRandom Character(10); Mật khẩu được tạo ngẫu nhiên có an toàn không?Câu trả lời ngắn gọn là việc sử dụng mật khẩu được tạo bởi trình tạo mật khẩu ngẫu nhiên trực tuyến sẽ an toàn hơn là sử dụng mật khẩu ngay cả với trẻ mới biết đi .
Ngẫu nhiên hóa mật khẩu là gì?Trình tạo mật khẩu ngẫu nhiên là chương trình phần mềm hoặc thiết bị phần cứng lấy đầu vào từ trình tạo số ngẫu nhiên hoặc giả ngẫu nhiên và tự động tạo mật khẩu . Mật khẩu ngẫu nhiên có thể được tạo thủ công, sử dụng các nguồn ngẫu nhiên đơn giản như xúc xắc hoặc đồng xu hoặc chúng có thể được tạo bằng máy tính. |