Mật khẩu và xác nhận xác thực mật khẩu trong HTML5

Hành vi chính xác của quá trình nhập có thể khác nhau giữa các trình duyệt. Một số trình duyệt hiển thị ký tự đã nhập trong giây lát trước khi làm mờ nó, trong khi những trình duyệt khác cho phép người dùng bật và tắt hiển thị văn bản thuần túy. Cả hai phương pháp đều giúp người dùng kiểm tra xem họ đã nhập mật khẩu dự định hay chưa, điều này có thể đặc biệt khó khăn trên thiết bị di động

Ghi chú. Mọi biểu mẫu liên quan đến thông tin nhạy cảm như mật khẩu (chẳng hạn như biểu mẫu đăng nhập) phải được cung cấp qua HTTPS. Nhiều trình duyệt hiện triển khai cơ chế cảnh báo đối với các hình thức đăng nhập không an toàn;

Thuộc tính chứa một chuỗi có giá trị là nội dung hiện tại của điều khiển chỉnh sửa văn bản được sử dụng để nhập mật khẩu. Nếu người dùng chưa nhập bất cứ thứ gì, giá trị này là một chuỗi rỗng (

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Nếu thuộc tính được chỉ định, nội dung của điều khiển

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Ghi chú. Các ký tự xuống dòng (U+000A) và xuống dòng (U+000D) không được phép trong giá trị

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Ngoài các thuộc tính hoạt động trên tất cả các phần tử

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Số ký tự tối đa (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào trường mật khẩu. Đây phải là một giá trị số nguyên 0 hoặc cao hơn. Nếu không chỉ định

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

Đầu vào sẽ không xác thực được ràng buộc nếu độ dài của văn bản được nhập vào trường này lớn hơn

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Số ký tự tối thiểu (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào trường nhập mật khẩu. Đây phải là một giá trị số nguyên không âm nhỏ hơn hoặc bằng giá trị được chỉ định bởi

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

Dữ liệu nhập vào sẽ không xác thực được ràng buộc nếu độ dài của văn bản được nhập vào trường nhỏ hơn

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

Thuộc tính

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

Nếu mẫu đã chỉ định không được chỉ định hoặc không hợp lệ, thì không có biểu thức chính quy nào được áp dụng và thuộc tính này bị bỏ qua hoàn toàn

Ghi chú. Sử dụng thuộc tính để chỉ định văn bản mà hầu hết các trình duyệt sẽ hiển thị dưới dạng chú giải công cụ để giải thích những yêu cầu để khớp với mẫu. Bạn cũng nên bao gồm văn bản giải thích khác gần đó

Việc sử dụng một mẫu được đặc biệt khuyến nghị cho các lần nhập mật khẩu, để giúp đảm bảo rằng các mật khẩu hợp lệ sử dụng nhiều loại ký tự được người dùng của bạn chọn và sử dụng. Với mẫu, bạn có thể bắt buộc quy tắc viết hoa chữ thường, yêu cầu sử dụng một số chữ số và/hoặc ký tự dấu chấm câu, v.v. Xem phần để biết chi tiết và một ví dụ

Thuộc tính

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần hiển thị trình giữ chỗ theo hướng ngược lại, bạn có thể sử dụng các ký tự định dạng thuật toán hai chiều Unicode để ghi đè hướng trong trình giữ chỗ;

Ghi chú. Tránh sử dụng thuộc tính

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

Thuộc tính Boolean, nếu có, nghĩa là người dùng không thể chỉnh sửa trường này. Tuy nhiên,

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

Ghi chú. Vì trường chỉ đọc không thể có giá trị, nên

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

Thuộc tính

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

Điều này không đặt giới hạn về số lượng ký tự mà người dùng có thể nhập vào trường. Nó chỉ xác định khoảng bao nhiêu có thể được nhìn thấy tại một thời điểm. Để đặt giới hạn trên cho độ dài của dữ liệu đầu vào, hãy sử dụng thuộc tính

Hộp nhập mật khẩu thường hoạt động giống như các hộp nhập văn bản khác;

Ở đây chúng ta thấy đầu vào mật khẩu cơ bản nhất, với nhãn được thiết lập bằng cách sử dụng phần tử

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" />

Để cho phép trình quản lý mật khẩu của người dùng tự động nhập mật khẩu, hãy chỉ định thuộc tính. Đối với mật khẩu, đây thường phải là một trong những điều sau đây

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Cho phép trình duyệt hoặc trình quản lý mật khẩu tự động điền vào trường mật khẩu. Đây không phải là thông tin như sử dụng một trong hai

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Không cho phép trình duyệt hoặc trình quản lý mật khẩu tự động điền vào trường mật khẩu. Lưu ý rằng một số phần mềm bỏ qua giá trị này vì giá trị này thường gây hại cho khả năng duy trì các hoạt động mật khẩu an toàn của người dùng

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Cho phép trình duyệt hoặc trình quản lý mật khẩu nhập mật khẩu hiện tại cho trang web. Điều này cung cấp nhiều thông tin hơn so với

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Cho phép trình duyệt hoặc trình quản lý mật khẩu tự động nhập mật khẩu mới cho trang web; . Mật khẩu mới có thể được tạo theo nhiều cách khác nhau, tùy thuộc vào trình quản lý mật khẩu đang sử dụng. Nó có thể điền vào một mật khẩu được đề xuất mới hoặc nó có thể hiển thị cho người dùng một giao diện để tạo một mật khẩu.

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Để thông báo cho trình duyệt của người dùng rằng trường mật khẩu phải có giá trị hợp lệ trước khi có thể gửi biểu mẫu, hãy chỉ định thuộc tính Boolean

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

Nếu các quy tắc cú pháp mật khẩu được đề xuất (hoặc bắt buộc) của bạn sẽ được hưởng lợi từ giao diện nhập văn bản thay thế so với bàn phím tiêu chuẩn, thì bạn có thể sử dụng thuộc tính này để yêu cầu một giao diện cụ thể. Trường hợp sử dụng rõ ràng nhất cho điều này là nếu mật khẩu bắt buộc phải ở dạng số (chẳng hạn như mã PIN). Ví dụ: các thiết bị di động có bàn phím ảo có thể chọn chuyển sang bố cục bàn phím số thay vì bàn phím đầy đủ để giúp nhập mật khẩu dễ dàng hơn. Nếu mã PIN được sử dụng một lần, hãy đặt thuộc tính thành

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

Như thường lệ, bạn có thể sử dụng các thuộc tính và để thiết lập độ dài tối thiểu và tối đa có thể chấp nhận được cho mật khẩu. Ví dụ này mở rộng trên ví dụ trước bằng cách chỉ định rằng mã PIN của người dùng phải có ít nhất bốn và không quá tám chữ số. Thuộc tính được sử dụng để đảm bảo rằng điều khiển nhập mật khẩu rộng tám ký tự

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Cũng như các điều khiển nhập văn bản khác, bạn có thể sử dụng phương pháp

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

HTML

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

JavaScript

document.getElementById("selectAll").onclick = () => {
  document.getElementById("userPassword").select();
}

Kết quả

Bạn cũng có thể sử dụng

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

document.getElementById("selectAll").onclick = () => {
  document.getElementById("userPassword").select();
}

Nếu ứng dụng của bạn có các hạn chế về bộ ký tự hoặc bất kỳ yêu cầu nào khác đối với nội dung thực của mật khẩu đã nhập, thì bạn có thể sử dụng thuộc tính để thiết lập một biểu thức chính quy được sử dụng để tự động đảm bảo rằng mật khẩu của bạn đáp ứng các yêu cầu đó

Trong ví dụ này, chỉ những giá trị bao gồm ít nhất bốn và không quá tám chữ số thập lục phân mới hợp lệ

<label for="hexId">Hex ID: </label>
<input
  id="hexId"
  type="password"
  pattern="[0-9a-fA-F]{4,8}"
  title="Enter an ID consisting of 4-8 hexadecimal digits"
  autocomplete="new-password" />

Ví dụ này chỉ chấp nhận đầu vào phù hợp với định dạng cho một. Những số này, được sử dụng cho mục đích nhận dạng và thuế ở Hoa Kỳ, có dạng "123-45-6789". Các loại quy tắc cho những giá trị nào được phép trong mỗi nhóm cũng tồn tại

HTML

<label for="ssn">SSN:</label>
<input
  type="password"
  id="ssn"
  inputmode="numeric"
  minlength="9"
  maxlength="12"
  pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
  required
  autocomplete="off" />
<br />
<label for="ssn">Value:</label>
<span id="current"></span>

Điều này sử dụng a giới hạn giá trị đã nhập thành các chuỗi đại diện cho số An sinh xã hội hợp pháp. Rõ ràng, biểu thức chính quy này không đảm bảo số SSN hợp lệ (vì chúng tôi không có quyền truy cập vào cơ sở dữ liệu của Cơ quan An sinh Xã hội), nhưng nó đảm bảo số có thể là một; . Ngoài ra, nó cho phép ba nhóm chữ số được phân tách bằng dấu cách, dấu gạch ngang ("-") hoặc không có gì

Giá trị này được đặt thành

document.getElementById("selectAll").onclick = () => {
  document.getElementById("userPassword").select();
}

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

JavaScript

Đây chỉ là một số mã đơn giản để hiển thị SSN đã nhập trên màn hình để bạn có thể nhìn thấy nó. Rõ ràng điều này đánh bại mục đích của trường mật khẩu, nhưng nó hữu ích cho việc thử nghiệm với

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Làm cách nào để xác thực mật khẩu và xác nhận mật khẩu trong HTML5?

Làm cách nào để so sánh mật khẩu và xác nhận mật khẩu trong HTML?

Làm cách nào để xác minh tên người dùng và mật khẩu trong HTML?

Làm cách nào để xác thực email và mật khẩu trong HTML?