作成方法：パスワード検証
- 前のページ エンターキーを押すとボタンがトリガーされる
- 次のページ パスワードの可視性を切り替える
CSSとJavaScriptを使ってパスワード検証フォームを作成する方法を学ぶ。
パスワード検証フォームの作成
第1歩 - HTMLの追加：
<div class="container">
<form action="/action_page.php">
<label for="usrname">Username</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="少なくとも1つの数字と大文字、小文字が必要で、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>
注意：パスワードフィールドでは、パターン属性（正規表現付き）を使用して、フォームの提出制限を設定します：8文字以上で、少なくとも1つの数字、大文字と小文字が必要です。
第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() {
// 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");
}
// 验证大写字母
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フォーム
- 前のページ エンターキーを押すとボタンがトリガーされる
- 次のページ パスワードの可視性を切り替える
