如何使用CSS和JavaScript创建密码验证表单？
要使用CSS和JavaScript创建密码验证表单，代码如下-
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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: rgb(28, 0, 128);
}
.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>
输出结果
上面的代码将产生以下输出-
在输入用户名和密码-
-
我正在尝试使用“新密码”解决方案来满足客户的要求。 我有这样的要求:< br> 1 -新密码必须是8 - 13个字符，< br> 2 -密码必须包含数字，< br> 3 -密码必须包含大小写字母，< br> 4 -密码不得包含用户名，最后< br> 5 -密码之前不得使用。 我不是Javascript方面的专家，我一直在尝试将所有这些要求放在一个脚本中，但我不知道如何解决这个要求的第1,4,5部分
-
本文向大家介绍如何使用CSS和JavaScript创建列表网格视图？，包括了如何使用CSS和JavaScript创建列表网格视图？的使用技巧和注意事项，需要的朋友参考一下 要创建列表网格视图，代码如下- 示例 输出结果 上面的代码将产生以下输出- 在单击列表按钮时-
-
问题内容： 我正在研究一个JSF表单原型，以使用AJAX数据验证将数据插入数据库表中。这是JSF页面： 这是托管bean： 我在实施表单验证时遇到困难。我想将使用过的字符串输入，并将其检查到数据库中，该值是否已进入数据库表中。在这里，我正在调用Java方法来检查值： 如何将插入的值发送到Java方法？ 最好的祝愿 问题答案： 您需要创建一个。 开球示例： 如下使用它： 请注意，您应该使用显示验证消
-
问题内容： 最近，我一直在尝试在互联网上偶然发现的登录脚本上实现自己的安全性。在尝试学习如何制作自己的脚本以为每个用户生成盐的努力之后，我偶然发现了。 据我了解（基于本页的阅读内容），当您使用时，盐已经在行中生成。这是真的？ 我的另一个问题是，吃2种盐不是很聪明吗？一个直接在文件中，另一个在数据库中？这样，如果有人破坏了数据库中的盐，您仍然直接在文件中保留了盐吗？我在这里读到，存储盐从来都不是一个
-
我试图使用regex或JavaScript实现密码验证。不幸的是，我完全是Regex的新手：/ null 谢谢
-
本文向大家介绍javascript实现密码验证，包括了javascript实现密码验证的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了javascript密码验证的实现方法，欢迎大家阅读。 javascript密码验证代码如下 希望本文对大家学习javascript程序设计有所帮助。