首页用JS编程实现让用户输入用户名和密码，输入正确才可以进入，用户有三次机会

用JS编程实现让用户输入用户名和密码，输入正确才可以进入，用户有三次机会

时间: 2024-09-25 09:13:21 浏览: 36

在JavaScript中，你可以创建一个简单的网页应用程序，使用HTML用于构建用户界面，JavaScript处理用户输入验证。以下是一个基础示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>登录尝试</title> </head> <body> <h1>用户名和密码验证</h1> <form id="loginForm"> <label for="username">用户名:</label><br> <input type="text" id="username" required><br> <label for="password">密码:</label><br> <input type="password" id="password" required><br> <button type="submit">登录</button> </form> <p id="message"></p> <script> var loginAttempts = 3; document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); // 阻止表单默认提交 const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); const message = document.getElementById('message'); if (usernameInput.value === 'correctUsername' && passwordInput.value === 'correctPassword') { message.textContent = "登录成功！"; this.reset(); // 清空表单 } else { if (loginAttempts > 0) { message.textContent = "用户名或密码错误，请重试 (" + loginAttempts + "次剩余)"; loginAttempts--; } else { message.textContent = "您已经尝试了3次，账户锁定，请联系管理员."; // 可能需要添加实际的锁定功能或提示 } } }); </script> </body> </html> ``` 在这个例子中，如果用户输入正确的用户名（`correctUsername`）和密码（`correctPassword`），则显示“登录成功”消息并清空表单。如果输入错误，会给出剩余尝试次数，并在尝试完三次后显示锁定信息。

阅读全文