JavaScript 如何验证确认密码

JavaScript 如何验证确认密码

在几乎每个现代网站中,我们都看到了登录和注册功能,这对客户和服务提供者来说无疑是一个重要的服务。当用户在某个网站上注册时,他们必须输入用户名和密码,为了输入密码,网站要求他们两次输入密码,这是为了用户的安全性,以确定输入的密码是相同的还是不同的。在本文中,我们将使用HTML、CSS和JavaScript来创建一个确认密码验证。

方法: 我们将创建一个简单的登录卡片,其中包含三个输入框,一个用于用户名(本文可以是任何内容),第二个用于密码,第三个输入框用于确认密码。首先,我们会在两个密码输入框中输入密码并确认密码,然后比较两个输入框中的密码是否相同,如果密码相同,我们会在确认密码输入框下方显示“密码匹配”,如果密码不同,我们会以红色显示“使用相同的密码”,以便用户输入相同的密码。

示例: 以下是上述方法的实现。

HTML

<!DOCTYPE html>
 
<head>
    <title>Confirm Password validation using javascript</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: rgb(50, 57, 78);
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .main {
 
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: rgb(34, 34, 34);
            height: 400px;
            width: 300px;
            margin-top: 15%;
            border-radius: 10px;
            box-shadow: 2px 4px 6px rgb(0, 0, 0);
        }
 
        .pass {
            display: flex;
            flex-direction: column;
        }
 
        .image h2 {
            color: rgb(2, 149, 27);
            font-size: 30px;
            font-family: sans-serif;
            margin-bottom: 50px;
        }
 
        .username input,
        .pass input {
            font-family: sans-serif;
            margin-bottom: 20px;
            height: 30px;
            border-radius: 100px;
            border: none;
            text-align: center;
            outline: none;
        }
 
        .submit_btn {
            height: 30px;
            width: 80px;
            border-radius: 100px;
            border: none;
            outline: none;
            background-color: rgb(0, 179, 95);
            margin-top: 15px;
        }
 
        .submit_btn:hover {
            background-color: rgba(0, 179, 95, 0.596);
            color: rgb(14, 14, 14);
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="image">
            <h2>GeeksforGeeks</h2>
        </div>
        <div class="username">
            <input type="text"
                   name="username"
                   placeholder="Dummyuser">
        </div>
        <div class="pass">
            <input id="pass"
                   type="password"
                   name="pass"
                   placeholder="Enter Password"
                   required"">
            <input id="confirm_pass"
                   type="password"
                   name="confirm_pass"
                   placeholder="Confirm Password" required
                   onkeyup="validate_password()">
        </div>
        <span id="wrong_pass_alert"></span>
        <div class="buttons">
            <button id="create"
                    class="submit_btn"
                    onclick="wrong_pass_alert()">
                Submit
            </button>
        </div>
    </div>
    <script>
        function validate_password() {
 
            var pass = document.getElementById('pass').value;
            var confirm_pass = document.getElementById('confirm_pass').value;
            if (pass != confirm_pass) {
                document.getElementById('wrong_pass_alert').style.color = 'red';
                document.getElementById('wrong_pass_alert').innerHTML
                    = '☒ Use same password';
                document.getElementById('create').disabled = true;
                document.getElementById('create').style.opacity = (0.4);
            } else {
                document.getElementById('wrong_pass_alert').style.color = 'green';
                document.getElementById('wrong_pass_alert').innerHTML =
                    '🗹 Password Matched';
                document.getElementById('create').disabled = false;
                document.getElementById('create').style.opacity = (1);
            }
        }
 
        function wrong_pass_alert() {
            if (document.getElementById('pass').value != "" &&
                document.getElementById('confirm_pass').value != "") {
                alert("Your response is submitted");
            } else {
                alert("Please fill all the fields");
            }
        }
    </script>
</body>
</html>
JavaScript

输出:
JavaScript 如何验证确认密码

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册