JavaScript 的密码验证
JavaScript 的密码验证
在本章中，我们将讨论使用JavaScript进行密码验证。每当用户在任何网站或应用上创建帐户时，我们都需要验证密码。因此，我们必须验证有效的密码以及确认密码的有效性。要获得有效的密码，必须包含以下参数才有效-
密码应为字母数字。
密码的首字母应为大写。
密码必须包含特殊字符(@，$，!，＆等)。
密码长度必须大于8个字符。
最重要的密码字段不应为空。
每当用户创建密码时，总会有一个确认密码字段。它检查用户输入的密码是否与此确认密码字段相同。要创建有效密码，必须将密码和确认密码字段的值都匹配。
首先，我们将检查有效密码，然后确认密码验证检查。
有效密码验证
在此示例中，我们将检查用户创建的密码是否有效，并与上述所有参数匹配。请参阅下面的代码以进行密码验证。
代码示例
<html>
<head>
<title> Verification of valid Password </title>
</head>
<script>
function verifyPassword() {
var pw = document.getElementById("pswd").value;
// 检查空密码字段
if(pw == "") {
document.getElementById("message").innerHTML = "****请输入密码!";
return false;
}
// 最小密码长度验证
if(pw.length < 8) {
document.getElementById("message").innerHTML = "**密码长度必须至少为8个字符";
return false;
}
// 密码验证的最大长度
if(pw.length > 15) {
document.getElementById("message").innerHTML = "**密码长度不能超过15个字符";
return false;
} else {
alert("Password is correct");
}
}
</script>
<body>
<center>
<p style="color:green">lidihuo</p>
<p> 验证有效密码示例 </p>
<form onsubmit ="return verifyPassword()">
<!-- Enter Password -->
<td> 输入密码 </td>
<input type = "password" id = "pswd" value = "">
<span id = "message" style="color:red"> </span> <br><br>
<!-- 单击以验证有效密码 -->
<input type = "submit" value = "Submit">
<!-- 单击以重置字段 -->
<button type = "reset" value = "Reset" >Reset</button>
</form>
</center>
</body>
</html>
输出1
lidihuo
验证有效密码示例
注意：在上面的屏幕截图中，您可能已经注意到每个人都可以看到密码，因为我们使用了输入type=" text"。如果希望密码在输入时不可见，请在HTML表单中使用input type="password"。
确认密码验证
在此示例中，我们将通过验证用户输入的两个密码是否相同来验证密码。加载表单之前，将使用 JavaScript在客户端站点上完成此过程。
代码示例
<html>
<head>
<title> Password Matching Validation </title>
</head>
<script>
function matchPassword() {
var pw1 = document.getElementById("pswd1").value;
var pw2 = document.getElementById("pswd2").value;
if(pw1 != pw2)
{
alert("密码不匹配");
} else {
alert("密码创建成功");
}
}
</script>
<body>
<center>
<form>
<h1 style="color:green">lidihuo</h1>
<h3> Confirm password Validation Example </h3>
<!-- Enter Password -->
<td> Enter Password </td>
<input type = "password" name = "pswd1" id="pswd1"> <br><br>
<!-- Enter Confirm password -->
<td> Confirm Password </td>
<input type = "password" name = "pswd2" id="pswd2> <br><br>
<!?Click to validate confirm password -->
<button type = "submit" onclick="matchPassword()">Submit</button>
<!-- Click to reset fields -->
<button type = "reset" value = "Reset" >Reset</button>
</form>
</center>
</body>
</html>
输出
注意：请注意，我们在此表单中使用了另一个按钮("重置")来清除用户输入的字段数据。
具有密码验证功能的完整表格
在上述示例中，您已经学会了验证有效的密码并确认密码验证。现在，我们将两种验证都保存在一个表单中，以完成密码验证过程。
为此，我们将创建一个简单的基本注册表单，其中包含一些字段，例如名字，姓氏，创建密码并确认密码。带星号(*)的字段是必填字段，用户必须在其中提供一些值。我们将在此表单中输入以下验证信息以验证密码：
空字段验证
最小密码长度验证，即 > 8
最大密码长度验证，即 < 15
确认密码验证
除此之外，我们还放置了一个
重置按钮，以清除表单中的字段数据。当您单击此
重置按钮时，用户在字段中提供的所有数据将被清除。现在，请参见以下代码：
重置按钮，以清除表单中的字段数据。当您单击此
重置按钮时，用户在字段中提供的所有数据将被清除。现在，请参见以下代码：
代码示例
<html>
<head>
<title> Validate the Password </title>
</head>
<script>
function validateForm() {
//collect form data in JavaScript variables
var pw1 = document.getElementById("pswd1").value;
var pw2 = document.getElementById("pswd2").value;
var name1 = document.getElementById("fname").value;
var name2 = document.getElementById("lname").value;
//check empty first name field
if(name1 == "") {
document.getElementById("blankMsg").innerHTML = "**Fill the first name";
return false;
}
//character data validation
if(!isNaN(name1)){
document.getElementById("blankMsg").innerHTML = "**Only characters are allowed";
return false;
}
//character data validation
if(!isNaN(name2)){
document.getElementById("charMsg").innerHTML = "**Only characters are allowed";
return false;
}
//check empty password field
if(pw1 == "") {
document.getElementById("message1").innerHTML = "**Fill the password please!";
return false;
}
//check empty confirm password field
if(pw2 == "") {
document.getElementById("message2").innerHTML = "**Enter the password please!";
return false;
}
//minimum password length validation
if(pw1.length < 8) {
document.getElementById("message1").innerHTML = "**Password length must be atleast 8 characters";
return false;
}
//maximum length of password validation
if(pw1.length > 15) {
document.getElementById("message1").innerHTML = "**Password length must not exceed 15 characters";
return false;
}
if(pw1 != pw2) {
document.getElementById("message2").innerHTML = "**Passwords are not same";
return false;
} else {
alert ("Your password created successfully");
document.write("JavaScript form has been submitted successfully");
}
}
</script>
<body>
<h1 style="color:green">lidihuo</h1>
<h3> Verify valid password Example </h3>
<form onsubmit ="return validateForm()">
<!-- Enter first name -->
<td> Full Name* </td>
<input type = "text" id = "fname" value = "">
<span id = "blankMsg" style="color:red"> </span> <br><br>
<!-- Enter last name -->
<td> Last Name </td>
<input type = "text" id = "lname" value = "">
<span id = "charMsg" style="color:red"> </span> <br><br>
<!-- Create a new password -->
<td> Create Password* </td>
<input type = "password" id = "pswd1" value = "">
<span id = "message1" style="color:red"> </span> <br><br>
<!?Enter confirm password -->
<td> Confirm Password* </td>
<input type = "password" id = "pswd2" value = "">
<span id = "message2" style="color:red"> </span> <br><br>
<!-- Click to verify valid password -->
<input type = "submit" value = "Submit">
<!-- Click to reset fields -->
<button type = "reset" value = "Reset" >Reset</button>
</form>
</body>
</html>
输出
lidihuo
Verify valid password Example