Cách thực hiện - 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:
Ví 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 (có biểu thức chính quy) 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ữ hoa và chữ thường.
Bước 2) Thêm CSS:
Tạo kiểu cho các trường nhập và hộp thông báo:
Ví dụ
/* 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: "✖";
}
Bước 3) Thêm JavaScript:
Ví dụ
<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>
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn biểu mẫu HTML của chúng tôi để tìm hiểu thêm về Biểu mẫu HTML.