Hướng dẫn how do you condition a password in html? - làm thế nào để bạn điều kiện một mật khẩu trong html?

---

Tìm hiểu cách tạo biểu mẫu xác thực mật khẩu với CSS và JavaScript.

Nội dung chính Show

• Xác thực mật khẩu
• Tạo biểu mẫu xác thực mật khẩu
• Password must contain the following:
• Làm cách nào để xem mật khẩu của mình trong HTML?
• Việc sử dụng kiểm soát mật khẩu trong các biểu mẫu HTML là gì?
• Mật khẩu xác nhận là gì?

---

Xác thực mật khẩu

Hãy tự mình thử »

---

Tạo biểu mẫu xác thực mật khẩu

Bước 1) Thêm HTML:

Thí dụ

& nbsp; & nbsp; & nbsp; & nbsp; Tên người dùng & nbsp; & nbsp; & nbsp;
 

    Username
   

& nbsp; & nbsp; & nbsp; Mật khẩu & nbsp;
  <  input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>

& nbsp; & nbsp; & nbsp; & nbsp;
 

& nbsp; Mật khẩu phải chứa các mục sau: & nbsp; Một chữ cái chữ thường & nbsp; Một chữ cái (chữ hoa) thư & nbsp; Một số & nbsp; Tối thiểu 8 ký tự
 

Password must contain the following:

A lowercase letter

A capital (uppercase) letter

A number

Minimum 8 characters

Lưu ý: Chúng tôi sử dụng thuộc tính mẫu (có biểu thức thông thường) bên trong trường Mật khẩu để đặt hạn chế để gửi biểu mẫu: nó phải chứa 8 ký tự trở lên có ít nhất một số và một chữ cái viết hoa và chữ thường. We use the pattern attribute (with a regular expression) inside the password field to set a restriction for submitting the form: it must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter.

Bước 2) Thêm CSS:

Kiểu các trường đầu vào và hộp thông báo:

Thí dụ

& nbsp; & nbsp; & nbsp; & nbsp; Tên người dùng & nbsp; & nbsp; & nbsp;
input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}

& nbsp; & nbsp; & nbsp; Mật khẩu & nbsp;
input[type=submit] {
  background-color: #04AA6D;
  color: white;
}

& nbsp; & nbsp; & nbsp; & nbsp;
.container {
  background-color: #f1f1f1;
  padding: 20px;
}

& nbsp; Mật khẩu phải chứa các mục sau: & nbsp; Một chữ cái chữ thường & nbsp; Một chữ cái (chữ hoa) thư & nbsp; Một số & nbsp; Tối thiểu 8 ký tự
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 10px;
}

Lưu ý: Chúng tôi sử dụng thuộc tính mẫu (có biểu thức thông thường) bên trong trường Mật khẩu để đặt hạn chế để gửi biểu mẫu: nó phải chứa 8 ký tự trở lên có ít nhất một số và một chữ cái viết hoa và chữ thường.
  padding: 10px 35px;
  font-size: 18px;
}

Bước 2) Thêm CSS:
.valid {
  color: green;
}

Kiểu các trường đầu vào và hộp thông báo:
  position: relative;
  left: -35px;
  content: "✔";
}

/ * Kiểu tất cả các trường đầu vào */đầu vào {& nbsp; chiều rộng: 100%; & nbsp; Đệm: 12px; & nbsp; biên giới: 1px rắn #ccc; & nbsp; Border-Radius: 4px; & nbsp; & nbsp; kích thước hộp: Border-box; & nbsp; & nbsp; margin-top: 6px; & nbsp; & nbsp; margin-bottom: 16px;}
.invalid {
  color: red;
}

/ * Kiểu nút Gửi */đầu vào [type = gửi] {& nbsp; & nbsp; màu nền: #04aa6d; & nbsp; & nbsp; màu: trắng;
  position: relative;
  left: -35px;
  content: "✖";
}

/ * Kiểu thùng chứa cho đầu vào */. Container {& nbsp; & nbsp; màu nền: #f1f1f1; & nbsp; & nbsp; padding: 20px;}

Thí dụ

& nbsp; & nbsp; & nbsp; & nbsp; Tên người dùng & nbsp; & nbsp; & nbsp;
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");

& nbsp; & nbsp; & nbsp; Mật khẩu & nbsp;
myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}

& nbsp; & nbsp; & nbsp; & nbsp;
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}

& nbsp; Mật khẩu phải chứa các mục sau: & nbsp; Một chữ cái chữ thường & nbsp; Một chữ cái (chữ hoa) thư & nbsp; Một số & nbsp; Tối thiểu 8 ký tự
myInput.onkeyup = function() {
  // Validate lowercase letters
  var lowerCaseLetters = /[a-z]/g;
  if(myInput.value.match(lowerCaseLetters)) {
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
}

Lưu ý: Chúng tôi sử dụng thuộc tính mẫu (có biểu thức thông thường) bên trong trường Mật khẩu để đặt hạn chế để gửi biểu mẫu: nó phải chứa 8 ký tự trở lên có ít nhất một số và một chữ cái viết hoa và chữ thường.
  var upperCaseLetters = /[A-Z]/g;
  if(myInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

Bước 2) Thêm CSS:
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }

Kiểu các trường đầu vào và hộp thông báo:
  if(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}

Hãy tự mình thử »

/ * Kiểu tất cả các trường đầu vào */đầu vào {& nbsp; chiều rộng: 100%; & nbsp; Đệm: 12px; & nbsp; biên giới: 1px rắn #ccc; & nbsp; Border-Radius: 4px; & nbsp; & nbsp; kích thước hộp: Border-box; & nbsp; & nbsp; margin-top: 6px; & nbsp; & nbsp; margin-bottom: 16px;} Go to our HTML Form Tutorial to learn more about HTML Forms.

Làm cách nào để xem mật khẩu của mình trong HTML?

Việc sử dụng kiểm soát mật khẩu trong các biểu mẫu HTML là gì?

Mật khẩu xác nhận là gì?