数据结构
网络
关系型数据库管理系统
操作系统
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+ 阅读量
广告