資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 和 JavaScript 建立密碼驗證表單？
在註冊頁面上，您一定見過用於設定密碼的輸入欄位。輸入密碼後，驗證系統會建議您如何構建密碼。例如，密碼至少應包含一個數字、一個字元，並且至少應為 8 個字元。在本教程中，我們將瞭解如何在網頁上設定相同的密碼驗證表單。
在鍵入設定密碼時，驗證系統會給出正確的建議。讓我們看看如何實現。
建立表單
<form> 元素用於在網頁上建立表單。設定了兩個輸入欄位，一個用於使用者名稱，另一個用於密碼：
<form>
<label for="uname">Username</label>
<input type="text" id="uname" name="uname" required />
<label for="pass">Password</label>
<input type="password" id="pass" name="pass" 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>
密碼輸入欄位模式
由於我們需要設定驗證系統，因此為密碼欄位設定了一個模式。如上所示，使用了pattern 屬性。為模式設定正則表示式以驗證使用者輸入的內容：
Pattern=”(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
密碼欄位訊息
使用title 屬性放置使用者設定密碼時可見的訊息：
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
檢查欄位
設定了一個複選欄位，如果使用者鍵入不正確的密碼格式，則會顯示該欄位：
#checksField {
display: none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
如果密碼輸入錯誤，則會顯示一條包含說明的訊息，即密碼必須包含以下內容：
<div id="checksField"> <h3>Password must contain the following:</h3> <p id="letter" class="wrong">A <b>lowercase</b> letter</p> <p id="capital" class="wrong">A <b>capital (uppercase)</b>letter</p> <p id="number" class="wrong">A <b>number</b></p> </div>
設定錯誤欄位
如果密碼輸入不正確，則會顯示紅色叉號：
.wrong {
color: red;
}
.wrong:before {
position: relative;
left: -35px;
content: "✖";
}
設定正確欄位
如果密碼輸入正確，則會顯示綠色勾號：
.correct {
color: green;
}
.correct:before {
position: relative;
left: -35px;
content: "✔";
}
驗證
在鍵入密碼時，會為小寫字母、大寫字母、數字等設定驗證指令碼。使用以下指令碼，顯示錯誤和正確符號：
myInput.onkeyup = function() {
var lowerCaseLetters = /[a-z]/g;
if (myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("wrong");
letter.classList.add("correct");
} else {
letter.classList.remove("correct");
letter.classList.add("wrong");
}
var upperCaseLetters = /[A-Z]/g;
if (myInput.value.match(upperCaseLetters)) {
capital.classList.remove("wrong");
capital.classList.add("correct");
} else {
capital.classList.remove("correct");
capital.classList.add("wrong");
}
var numbers = /[0-9]/g;
if (myInput.value.match(numbers)) {
number.classList.remove("wrong");
number.classList.add("correct");
} else {
number.classList.remove("correct");
number.classList.add("wrong");
}
};
示例
要使用 CSS 和 JavaScript 建立密碼驗證表單，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input {
width: 100%;
padding: 12px;
margin-top: 6px;
margin-bottom: 16px;
}
input[type="submit"] {
background-color: rgb(69, 27, 117);
color: white;
font-weight: bold;
font-size: 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
form {
padding: 20px;
}
#checksField {
display: none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#checksField p {
padding: 10px 35px;
font-size: 18px;
}
.correct {
color: green;
}
.correct:before {
position: relative;
left: -35px;
content: "✔";
}
.wrong {
color: red;
}
.wrong:before {
position: relative;
left: -35px;
content: "✖";
}
</style>
</head>
<body>
<h1 style="text-align: center;">Password Validation Example</h1>
<form>
<label for="uname">Username</label>
<input type="text" id="uname" name="uname" required />
<label for="pass">Password</label>
<input type="password" id="pass" name="pass" 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 id="checksField">
<h3>Password must contain the following:</h3>
<p id="letter" class="wrong">A <b>lowercase</b> letter</p>
<p id="capital" class="wrong">A <b>capital (uppercase)</b>letter</p>
<p id="number" class="wrong">A <b>number</b></p>
</div>
<script>
var myInput = document.getElementById("pass");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
myInput.onfocus = function() {
document.getElementById("checksField").style.display = "block";
};
myInput.onblur = function() {
document.getElementById("checksField").style.display = "none";
};
myInput.onkeyup = function() {
var lowerCaseLetters = /[a-z]/g;
if (myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("wrong");
letter.classList.add("correct");
} else {
letter.classList.remove("correct");
letter.classList.add("wrong");
}
var upperCaseLetters = /[A-Z]/g;
if (myInput.value.match(upperCaseLetters)) {
capital.classList.remove("wrong");
capital.classList.add("correct");
} else {
capital.classList.remove("correct");
capital.classList.add("wrong");
}
var numbers = /[0-9]/g;
if (myInput.value.match(numbers)) {
number.classList.remove("wrong");
number.classList.add("correct");
} else {
number.classList.remove("correct");
number.classList.add("wrong");
}
};
</script>
</body>
</html>
更新於： 2023-12-08
1K+ 閱讀量
廣告