操作方法 - 密碼驗證
瞭解如何使用 CSS 和 JavaScript 建立密碼驗證表單。
密碼驗證
建立密碼驗證表單
步驟 1) 新增 HTML
示例
<div class="container">
<form action="/action_page.php">
<label for="usrname">使用者名稱</label>
<input type="text" id="usrname" name="usrname" required>
<label for="psw">密碼</label>
<input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="必須包含至少一個數字、一個大寫字母和小寫字母，並且至少有 8 個或更多字元" required>
<input type="submit" value="提交">
</form>
</div>
<div id="message">
<h3>密碼必須包含以下內容：</h3>
<p id="letter" class="invalid">一個 <b>小寫</b> 字母</p>
<p id="capital" class="invalid">一個 <b>大寫（小寫）</b> 字母</p>
<p id="number" class="invalid">一個 <b>數字</b></p>
<p id="length" class="invalid">最短 <b>8 個字元</b></p>
</div>
注意：我們在密碼欄位中使用 pattern 屬性（帶正則表示式）來設定提交表單的限制：它必須包含 8 個或更多字元，其中至少包含一個數字、一個大寫字母和一個小寫字母。
步驟 2) 新增 CSS
設定輸入欄位和訊息框的樣式
示例
/* 所有輸入欄位的樣式 */
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* 樣式提交按鈕 */
input[type=submit] {
background-color: #04AA6D;
color: white;
}
/* 輸入容器的樣式 */
.container {
background-color: #f1f1f1;
padding: 20px;
}
/* 當用戶點選密碼欄位時，訊息框會顯示 */
#message {
display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#message p {
padding: 10px 35px;
font-size: 18px;
}
/* 當要求正確時，新增綠色文字顏色和對勾標記 */
.valid {
color: green;
}
.valid:before {
position: relative;
left: -35px;
content: "✔";
}
/* 當要求錯誤時，新增紅色文字顏色和 "x" 圖示 */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: "✖";
}
步驟 3) 新增 JavaScript
示例
<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");
// 當用戶點選密碼欄位時，顯示訊息框
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// 當用戶點選密碼欄位以外的區域時，隱藏訊息框
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}
// 當用戶開始在密碼欄位中輸入內容時
myInput.onkeyup = function() {
// 驗證小寫字母
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");
}
// 驗證大寫字母
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");
}
// 驗證數字
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");
}
// 驗證長度
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
</script>
自己動手試一試 »
提示：前往我們的 HTML 表單教程 瞭解更多關於 HTML 表單的資訊。
