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>
输出

lidihuo

Confirm password Validation Example Enter Password

Confirm Password

注意:请注意,我们在此表单中使用了另一个按钮("重置")来清除用户输入的字段数据。

具有密码验证功能的完整表格

在上述示例中,您已经学会了验证有效的密码并确认密码验证。现在,我们将两种验证都保存在一个表单中,以完成密码验证过程。
为此,我们将创建一个简单的基本注册表单,其中包含一些字段,例如名字,姓氏,创建密码并确认密码。带星号(*)的字段是必填字段,用户必须在其中提供一些值。我们将在此表单中输入以下验证信息以验证密码:

空字段验证
最小密码长度验证,即 > 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

Full Name*

Last Name

Create Password*

Confirm Password*