Làm thế nào để - Xác thực mật khẩu
Tìm hiểu cách tạo biểu mẫu xác thực mật khẩu bằng CSS và JavaScript.
Xác thực mật khẩu
Tạo biểu mẫu xác thực mật khẩu
Bước 1) Thêm HTML:
Thí dụ
<div class="container">
<form action="/action_page.php">
<label for="usrname">Username</label>
<input type="text" id="usrname"
name="usrname" required>
<label for="psw">Password</label>
< 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>
<input
type="submit" value="Submit">
</form>
</div>
<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p
id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length"
class="invalid">Minimum <b>8 characters</b></p>
</div>
Lưu ý: Chúng tôi sử dụng thuộc tính mẫu (với một biểu thức chính quy) bên trong trường mật khẩu để đặt giới hạn cho việc 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ữ hoa và chữ thường.
Bước 2) Thêm CSS:
Style the input fields and the message box:
Example
/* Style all input fields */
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* Style the submit
button */
input[type=submit] {
background-color: #04AA6D;
color: white;
}
/* Style the container
for inputs */
.container
{
background-color: #f1f1f1;
padding: 20px;
}
/* The message
box is shown when the user clicks on the password field */
#message {
display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#message p {
padding: 10px 35px;
font-size: 18px;
}
/* Add a green text color and a
checkmark when the requirements are right */
.valid {
color: green;
}
.valid:before {
position: relative;
left: -35px;
content: "✔";
}
/* Add a red text color and an "x" icon when the
requirements are wrong */
.invalid {
color: red;
}
.invalid:before
{
position: relative;
left: -35px;
content: "✖";
}
Step 3) Add JavaScript:
Example
<script>
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");
// When the user clicks
on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
//
When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
document.getElementById("message").style.display
= "none";
}
// When the user starts to type something inside the
password field
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");
}
// Validate capital letters
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");
}
// Validate numbers
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");
}
// Validate length
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
</script>
Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.