Bạn đang xem : loại đầu vào cho mật khẩu

Phần tử HTML & lt; input type = “password” & gt; là một loại phần tử đầu vào cụ thể được sử dụng để tạo các trường đầu vào liên quan đến mật khẩu. Phần tử này được thiết kế để xử lý mật khẩu nên an toàn hơn so với đầu vào & lt; thông thường type = ‘text’ & gt; chúng tôi thấy ở mọi dạng trên internet.

Thứ nhất: Nó làm cho mật khẩu không hiển thị với bất kỳ ai đang ngồi xung quanh bạn bằng cách hiển thị “.” hoặc “*” thay vì các ký tự bạn nhập.

Thứ hai: Trình duyệt xử lý các đầu vào với kiểu văn bản và kiểu mật khẩu khác nhau, trình duyệt có thể cố gắng tự động điền lại các kiểu nhập văn bản nếu chúng đã được nhập trước đó, đây là điều mà bạn có thể không phải lúc nào cũng muốn.

HTML & lt; input type = ”password” & gt; là nơi bạn nên yêu cầu người dùng nhập mật khẩu của họ và trong bài viết này, chúng tôi sẽ biết cách chúng tôi có thể tùy chỉnh các trường nhập mật khẩu để phù hợp với nhu cầu của chúng tôi.

Đến cuối hướng dẫn này, bạn sẽ biết cách thực hiện

  1. tạo trường nhập mật khẩu và tạo kiểu cho trường đó
  2. thêm một nút có thể cho phép người dùng xem mật khẩu của họ ở dạng văn bản thuần túy
  3. thêm xác thực vào trường nhập mật khẩu của bạn
  4. tạo một trường mật khẩu chỉ số

Việc tạo trường nhập mật khẩu đơn giản như nhập & lt; input type = “password” & gt; và trường này sẽ chứa mọi thứ chúng ta cần như ẩn mật khẩu và thay thế bằng dấu chấm.

Bây giờ đã đến lúc thêm một số logic vào ví dụ của chúng tôi ở đây, chúng tôi sẽ tạo một biểu tượng con mắt mà bạn có thể nhấp để hiển thị mật khẩu và nhấp lại để ẩn mật khẩu.

Hiển thị / Ẩn Mặt nạ Mật khẩu

Xem Bút Tạo trường mật khẩu HTML

 
& lt; 

div

lớp

=

"ví dụ đầu tiên"

& gt; & lt;

đầu vào

loại

=

"mật khẩu"

id

=

"mật khẩu-trường"

& gt; & lt;

i

id

=

"trạng thái đạt"

lớp

=

"fa fa-eye"

aria-hidden

=

"true"

onClick < / p>

=

"viewPassword ()"

& gt; & lt; /

i

& gt; & lt; /

div

& gt;

Ở đây, tất cả những gì tôi đã làm là tạo một div chứa trường nhập mật khẩu và nó có id là “password-field” mà chúng tôi sẽ sử dụng sau này để tạo kiểu và tham chiếu cho nó. nó trong tệp javascript của chúng tôi tiếp theo, chúng tôi tạo một phần tử I với lớp “fa fa-eye” và id là “pass-status” sẽ tạo ra một biểu tượng con mắt bằng fontawesome

Lưu ý: nếu bạn không quen với phông chữ tuyệt vời, đừng lo lắng đó là một phông chữ đơn giản chứa nhiều biểu tượng được sử dụng trên khắp web vì chúng rất dễ tạo kiểu.

Chúng tôi cũng đã thêm một sự kiện onClick vào biểu tượng của chúng tôi để gọi một hàm có tên là viewPassword mỗi khi nó được nhấp vào. Đây là kết quả cuối cùng cho đến nay, đừng lo lắng nếu bạn trông khác, bạn có thể sao chép tất cả CSS từ codepen của chúng tôi

Bây giờ, chúng ta cần tạo mã javascript để kiểm tra xem mật khẩu đã bị ẩn hay chưa và thay đổi biểu tượng thành hình chữ thập.

  

var

passwordInput

=

tài liệu

.getElementById (

'password-field' < / p>);

var

passStatus

=

tài liệu

.getElementById (

'pass-status'

);

Để làm cho ví dụ này hoạt động, trước tiên chúng ta cần kiểm tra xem mật khẩu có bị ẩn hay không và xem nó cũng thay đổi biểu tượng để phù hợp với trạng thái xem. Để thực hiện tất cả những điều này, chúng tôi sẽ sử dụng một thủ thuật nhỏ, chúng tôi biết rằng điều khiến mật khẩu của chúng tôi bị ẩn là việc sử dụng “mật khẩu” làm loại dữ liệu đầu vào của chúng tôi, vì vậy tất cả những gì chúng tôi phải làm là khi biểu tượng được nhấp vào, chúng tôi sẽ kiểm tra xem đầu vào có loại “mật khẩu”, chúng tôi sẽ thay đổi nó thành loại “văn bản”, điều này sẽ dẫn đến hiển thị mật khẩu cho đến khi người dùng nhấp lại vào biểu tượng.

  

if

(passwordInput.type

==

'password'

) { passwordInput.type

=

'text'

; passStatus.className

=

'fa fa-eye-slash'

; }

khác

{ passwordInput.type

=

'mật khẩu'

; passStatus.className

=

'fa fa-eye'

; }

Hãy nhớ rằng tất cả mã này được viết bên trong hàm viewPassword (). Tất cả những gì chúng ta đang làm ở đây là sử dụng câu lệnh if để kiểm tra xem loại nhập mật khẩu của chúng ta có phải là “password” hay không, sau đó thay đổi nó thành văn bản và thay đổi lớp của lớp biểu tượng thành “fa fa-eye” là lớp dành cho mắt bị rạch. trong phông chữ tuyệt vời. Nếu đầu vào đã có kiểu văn bản có nghĩa là biểu tượng đã được nhấp vào, chúng tôi sẽ đảo ngược mọi thứ chúng tôi đã thực hiện bằng cách thay đổi kiểu nhập trở lại mật khẩu và tên lớp biểu tượng thành “fa fa-eye”, điều này sẽ làm cho mật khẩu bị ẩn một lần nữa .

Kiểm tra độ mạnh của mật khẩu

Xem Bút Tạo trường mật khẩu HTML

Cho phép người dùng hiển thị và ẩn mật khẩu của mình không phải là tất cả những gì chúng tôi có thể làm, một nghiên cứu đã chỉ ra rằng mỗi người dùng tốt nhất sử dụng 123456 làm mật khẩu của họ, điều này rất không an toàn và tất cả các nhà phát triển trang web nội dung ưa thích ngày nay đều làm từ băm đến Tất cả những điều này sẽ không tạo ra bất kỳ sự khác biệt nào nếu hacker chỉ cần đoán được mật khẩu của bạn và nếu bạn sử dụng bất kỳ mật khẩu nào trong danh sách 25 mật khẩu nổi tiếng hàng đầu, thì rất có thể hacker sẽ đoán đúng. Một cách chúng tôi có thể giải quyết vấn đề này là thêm xác thực vào đầu vào mật khẩu của bạn. Ví dụ: buộc người dùng của bạn tạo mật khẩu chứa ít nhất một chữ cái, một chữ số và 8 ký tự. Và đây chính xác là những gì chúng tôi sẽ làm bây giờ.

 
  & lt; 

div

lớp

=

"ví dụ thứ hai"

& gt; & lt;

đầu vào

loại

=

"mật khẩu"

id

=

"password-2"

onkeyup

=

"validate ();"

& gt; & lt; /

div

& gt; & lt;

div

id

=

"validation-txt"

& gt; & lt; /

div

& gt;

Ở đây, chúng tôi đã làm giống như ví dụ đầu tiên, chúng tôi tạo một div với lớp “ví dụ thứ hai” và thêm vào đó một đầu vào mật khẩu với id là “password-2” và Tôi đã thêm một sự kiện onkeyup và đặt giá trị của nó bằng một hàm validate ().

Lưu ý: chúng tôi đã sử dụng sự kiện onkeyup ở đây vì onkeyup sẽ kích hoạt sự kiện sau khi phím được nhấn trước khi ký tự được nhập ngay trên màn hình, điều này sẽ dẫn đến sự cố khiến mật khẩu không được viết.

Chúng tôi cũng đã thêm một div có id là “validation-txt” sẽ chứa tất cả cảnh báo mà chúng tôi sẽ hiển thị cho người dùng.

Bây giờ chúng ta cần tạo javascript để biến tất cả điều này thành hiện thực. Đầu tiên, chúng tôi tạo hàm validate () sẽ chứa tất cả mã của chúng tôi

  

hàm

validate () {

var

validationField

=

tài liệu

.getElementById (

'validation-txt'

);

var

password

=

document

.getElementById (

'password-2'

);

var

content

=

password.value;

lỗi var

=

[]; }

Trong đoạn mã trên, chúng tôi đã sử dụng document.getElementById để lấy đầu vào mật khẩu và div xác thực sẽ chứa tất cả các cảnh báo của chúng tôi. Chúng tôi cũng đã tạo một biến có tên là nội dung và chúng tôi gán nó cho password.value là giá trị của trường nhập mật khẩu ngoài, chúng tôi cũng tạo một mảng trống sẽ chứa tất cả các lỗi xác thực của chúng tôi để người dùng có thể xem chúng.

Tiếp theo, chúng tôi cần bắt đầu xác thực mật khẩu mỗi khi nhập một ký tự và kiểm tra xem nó có đáp ứng các điều kiện xác thực của chúng tôi hay không.

Như tôi đã đề cập trước đây, chúng tôi sẽ kiểm tra xem độ dài của mật khẩu có lớn hơn 8 ký tự không và mật khẩu có chứa ít nhất một chữ cái và một chữ số hay không.

Chúng tôi sẽ bắt đầu bằng cách dễ nhất là kiểm tra xem mật khẩu có dài hơn 8 ký tự không

  

if

(content.length

& lt;

8

) { error.push (

"Mật khẩu của bạn phải có ít nhất 8 ký tự"

); }

Ở đây, chúng tôi đang sử dụng thuộc tính length để kiểm tra xem mật khẩu của chúng tôi có ít hơn 8 ký tự hay không và nếu có thì chúng tôi đang sử dụng hàm push để đẩy chuỗi “Mật khẩu của bạn phải có ít nhất 8 ký tự ”cho mảng lỗi mà chúng tôi đã tạo trước đó.

Tiếp theo, chúng ta cần kiểm tra xem trường mật khẩu có chứa ít nhất một chữ cái hay không. Thật không may, không có cách gốc nào mà chúng ta có thể thực hiện điều này một cách dễ dàng trong javascript vì vậy chúng ta sẽ phải sử dụng biểu thức chính quy hoặc đôi khi được gọi là “regex”. Đừng lo lắng nếu bạn không quen với các biểu thức chính quy hoặc chưa từng nghe nói về chúng trước đây: biểu thức chính quy là một chuỗi đặc biệt mô tả một định dạng tìm kiếm, chúng ta có thể sử dụng nó để tìm kiếm số điện thoại trong một tài liệu dài chỉ cần biết đó là định dạng 998 – 902-142. Ở đây, chúng tôi sẽ sử dụng nó để kiểm tra một lần xem mật khẩu có chứa ít nhất một chữ cái hay không và liệu mật khẩu có chứa ít nhất một chữ số hay không.

  

if

(content.search (

/ [a-z] / i

)

& lt;

< p> 0

) { error.push (

"Mật khẩu của bạn phải chứa ít nhất một chữ cái."

); }

if

(content.search (

/ [0-9] / i

)

& lt;

0

) { error.push (

"Mật khẩu của bạn phải chứa ít nhất một chữ số."

); }

Ở đây chúng tôi đang sử dụng hàm tìm kiếm là một hàm biểu thức chính quy đặc biệt được xây dựng nguyên bản cho javascript để kiểm tra một cụm từ biểu thức chính quy so với một chuỗi. Ở đây “/ [a-z] / i” có nghĩa là chức năng tìm kiếm sẽ tìm kiếm bất kỳ ký tự nào từ a đến z và “/ [0-9] / i” sẽ tìm kiếm bất kỳ chữ số nào từ 0 đến 9 và nếu không bất kỳ nó sử dụng hàm push mà chúng ta đã nói trước đó trong hướng dẫn này để thêm chuỗi cảnh báo vào mảng lỗi.

Điều cuối cùng chúng tôi cần làm là thêm các lỗi mà chúng tôi đã thu thập được trong mảng lỗi của mình vào HTML.

 

if

(error.length

& gt;

0

) { validationField.innerHTML

=

error.join (

','

);

trả về

sai

; } validationField.innerHTML

=

error.join (

','

);

trả về

true

;

Ở đây chúng tôi đang sử dụng câu lệnh if để kiểm tra xem số phần tử trong mảng có lớn hơn 0 hay không, nghĩa là đã có lỗi xác thực, sau đó chúng tôi sử dụng hàm nối để đính kèm tất cả các phần tử của mảng với nhau trong một chuỗi được phân tách bằng dấu phẩy “,” sau đó thêm kết quả của chúng tôi vào html trong div xác thực mà chúng tôi đã tạo.

“ Chỉ chữ số ”Trường mật khẩu sử dụng CSS

Xem Bút Tạo trường mật khẩu HTML

Điều cuối cùng chúng ta sẽ tìm hiểu trong hướng dẫn này là cách tạo trường nhập mật khẩu chỉ chấp nhận số. Điều này rất hữu ích, chẳng hạn như nếu bạn đang cố gắng tạo trường nhập cho mã vượt qua chỉ cần bằng số và muốn người dùng di động tự động nhìn thấy bảng số sau khi nhấp vào trường nhập.

Lần này, chúng tôi sẽ không tạo trường nhập mật khẩu, thay vào đó chúng tôi sẽ tạo trường nhập số

 
& lt; 

đầu vào

loại

=

"số"

id

=

"mật khẩu-3"

mẫu

=

"[0-9] *"

& gt;

Ở đây, chúng tôi đã tạo phần tử đầu vào với một loại số và thêm mẫu = ”[0-9] *” phần tử này được hỗ trợ trong safari và hầu hết các trình duyệt và sẽ tạo ra bàn phím số trong điện thoại di động tự động bật lên khi trường nhập được lấy nét.

Điều còn lại bây giờ là ẩn mật khẩu để làm cho mật khẩu trông giống như các lần nhập mật khẩu khác mà chúng tôi đã thực hiện và xóa con quay số xuất hiện theo mặc định trong nhiều trình duyệt. May mắn thay, điều này rất dễ dàng bằng cách sử dụng CSS 3.

  # 

password-3

{

-webkit-

text-security:

đĩa

;

-moz-

text-security:

vòng kết nối

; text-security:

vòng kết nối

; }

đầu vào

[

loại

=

số

]

::

-webkit-inner-spin-button

,

đầu vào

[

loại

=

số

]

::

-webkit-external-spin-button

{

-webkit-

ngoại hình

:

không có

;

lợi nhuận

:

0

; }

Trong phần đầu tiên, chúng tôi đang sử dụng id của phần tử đầu vào để ẩn mật khẩu và thay thế nó bằng các dấu chấm giống như trường nhập khác với loại mật khẩu và phần thứ hai, chúng tôi sẽ thay đổi kiểu của mọi phần tử đầu vào với số loại để thay đổi các con quay bên ngoài và bên trong đôi khi xuất hiện nguyên bản trong một số trình duyệt để cho phép người dùng tăng và giảm số lượng.


Xem thêm những thông tin liên quan đến chủ đề loại đầu vào cho mật khẩu

Yến Nguyễn | Mô phỏng hệ thống treo với vi điều khiển pid

  • Tác giả: Kỷ Nguyên 4.0
  • Ngày đăng: 2022-06-20
  • Đánh giá: 4 ⭐ ( 3032 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế mô phỏng hệ thống treo pid bằng ứng dụng Matlab Simulink
    matlab treo

Hỏi – Đáp: 11 vướng mắc về mã loại hình xuất, nhập khẩu

  • Tác giả: thuvienphapluat.vn
  • Đánh giá: 5 ⭐ ( 5146 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng cục Hải quan ban hành Công văn 1478/TCHQ-GSQL ngày 26/4/2022 giải đáp 11 vướng mắc liên quan đến mã loại hình xuất khẩu, nhập khẩu.

Hướng dẫn đổi mật khẩu vali dễ dàng và nhanh chóng

  • Tác giả: www.dienmayxanh.com
  • Đánh giá: 5 ⭐ ( 7291 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy bảo vệ hành lí thật cẩn thận trước khi đi du lịch, đặc biệt là hành lí cần được kí gửi. Bên dưới là một số mẹo cho bạn có thể áp dụng đổi mật khẩu vali dễ dàng nhé!

Sử dụng khóa bảo mật hoặc Windows Hello để đăng nhập an toàn vào tài khoản Microsoft mà không cần đến mật khẩu

  • Tác giả: www.microsoft.com
  • Đánh giá: 3 ⭐ ( 2504 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: We turned on the ability to securely sign in with your Microsoft account using a standards-based FIDO2 compatible device—no username or password required!

Tạm biệt những mật khẩu phức tạp, khó nhớ với công nghệ mới

  • Tác giả: baomoi.com
  • Đánh giá: 5 ⭐ ( 1272 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạm biệt những mật khẩu phức tạp, khó nhớ với công nghệ Passkey mới, Apple đang hướng người dùng tới một kỷ nguyên ‘không mật khẩu’.

  • Tác giả: estudent.buh.edu.vn
  • Đánh giá: 4 ⭐ ( 8534 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo và sử dụng mật khẩu mạnh

  • Tác giả: support.microsoft.com
  • Đánh giá: 3 ⭐ ( 6752 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy làm theo các mẹo sau đây để cải thiện sự an toàn và bảo mật cho tài khoản trực tuyến của bạn bằng cách tạo mật khẩu mạnh và giữ an toàn cho tài khoản.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Angular Architecture Patterns and Best Practices (that help to scale) - angular 2 architecture

By ads_php