JavaScript给用户三次输入用户名和密码的机会

在JavaScript中，我们可以创建一个简单的登录表单，让用户有三次尝试输入用户名和密码的机会。以下是一个基本的示例：

let attempts = 0; // 初始化尝试次数为0

function login() {
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');

    const username = usernameInput.value;
    const password = passwordInput.value;

    if (validateCredentials(username, password)) { // 如果验证通过
        alert('登录成功！');
        attempts = 0; // 重置尝试次数
    } else {
        attempts++;
        if (attempts <= 3) { // 如果尝试次数小于等于3次
            alert('用户名或密码错误，请重试。你还剩 ' + (3 - attempts) + ' 次机会。');
        } else { // 超过3次
            alert('登录失败，您已达到最大尝试次数。');
            resetForm(); // 清空表单
        }
    }
}

// 验证函数（这里只是一个例子，实际应用需要替换为更复杂的验证）
function validateCredentials(username, password) {
    // 这里仅做简单示例，一般会检查数据库或其他地方的实际数据
    return username === 'exampleUser' && password === 'examplePassword';
}

// 清空表单函数
function resetForm() {
    usernameInput.value = '';
    passwordInput.value = '';
}

// 添加提交按钮点击事件处理
document.getElementById('loginBtn').addEventListener('click', login);

在这个示例中，当用户点击登录按钮时，会触发`login`函数。如果验证失败，会显示错误信息并增加尝试次数。如果尝试超过三次，会给出最终提示并清空表单。