JavaScript 密码验证

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 密码验证

作者：迹忆客最近更新：2024/03/20 浏览次数：

本文将介绍如何在 JavaScript 中验证密码。

JavaScript 中的密码验证

主要使用网站验证方法对用户进行身份验证。使用 JavaScript，我们可以在客户端应用验证，使数据处理比服务器端更快。

我们可以使用 JavaScript 表单验证来验证 name、password、email 和更多字段。密码验证以某种方式引导用户使用强密码，以避免密码破解和帐户被滥用。

在以下示例中，我们将使用 JavaScript 验证功能来确保用户不得输入少于 6 个字符且不应超过 12 个字符的密码。

<html>
    <head>
        <title> Verification of valid Password </title>
    </head>
    <script>
    function verifyPassLength()
    {
        var password = document.getElementById("password1").value;
        //check empty password field
        if(password == "")
        {
            document.getElementById("message").innerHTML = "Please enter valid password...!";
            return false;
        }
        
        //Password minimum length
        if(password.length < 6) 
        {
            document.getElementById("message").innerHTML = "Password should not be less than 6 characters...!";
            return false;
        }

        //Password maximum length
        if(password.length > 12)
        {
            document.getElementById("message").innerHTML = "Password should not be greater than 12 characters...!";
            return false;
        }
        else
        {
            alert("Success....! Password Verified.");
        }
    }
    </script>
    <body>

        <h1 style="color:blueviolet">DelftStack</h1>
        <h3>  JavaScript Password Length Validation </h3>

        <form onsubmit ="return verifyPassLength()">
            <!-- Password input -->
            <td> Enter Password : </td>
            <input type = "password" id = "password1" value = "">
            <span id = "message" style="color:red"> </span>
            <br><br>
            <input type = "submit" value = "Submit">
        </form>
    </body>
</html>

输出：

根据 JavaScript 中的特定模式验证密码

在另一个示例中，我们正在根据特定模式验证密码。密码应至少包含 8 个字符，包括至少一个大写字母和一个小写字母、一个特殊字符和一个数字。

<!DOCTYPE html>
<html>

<head>
	<title>validate password</title>
	<script type="text/javascript">
		function password_validation()
        {
			var result;
			var password = document.getElementById("t1").value;
            // checking for a specific password pattern
			if (password.match(/[a-z]/g) && password.match(/[A-Z]/g) && password.match(/[0-9]/g) && 
                password.match(/[^a-zA-Z\d]/g) && password.length >= 8)
            {
                result = "Valid Password";
            }
			else
            {
                result = "Invalid Password";
            }

			document.getElementById("t2").value = result;
		}
	</script>
</head>

<body>
    <h3 style="color: blueviolet;">JavaScript Password Validation</h3>
	<p>
		Enter Password:
		<input type="password" 	id="t1" />
		<br/>
		<br/>
		<input type="button" value="Submit"	onclick="password_validation()" />
		<br/>
		<br/>
        Output:
		<input type="text" id="t2" readonly/>
        <br><br>
    </p>
    <p> <b><u style="color: red;">Note:</u></b> Password must contain</p>
    <ol>
        <li>one uppercase letter at leaset</li>
        <li>one lowercase letter at least</li>
        <li>At least 1 digit </li>
        <li>At least 1 special character</li>
        <li>Minimum 8 characters </li>
    </ol>
</body>
</html>