如何通过JavaScript实现登录验证？

<form id="loginForm">
    <div>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required>
        <span class="error" id="emailError"></span>
    </div>
    <div>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required minlength="6">
        <span class="error" id="passwordError"></span>
    </div>
    <button type="submit">登录</button>
    <span class="general-error" id="generalError"></span>
</form>

document.addEventListener('DOMContentLoaded', () => {
    const loginForm = document.getElementById('loginForm');
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const emailError = document.getElementById('emailError');
    const passwordError = document.getElementById('passwordError');
    const generalError = document.getElementById('generalError');

    // 清除所有错误信息
    function clearErrors() {
        emailError.textContent = '';
        passwordError.textContent = '';
        generalError.textContent = '';
    }

    // 显示特定字段的错误
    function displayError(element, message) {
        element.textContent = message;
    }

    // 邮箱格式验证
    function validateEmail(email) {
        const re = /^[^s@]+@[^s@]+.[^s@]+$/;
        return re.test(String(email).toLowerCase());
    }

    // 客户端验证逻辑
    function validateForm() {
        clearErrors();
        let isValid = true;

        // 验证邮箱
        if (emailInput.value.trim() === '') {
            displayError(emailError, '邮箱不能为空。');
            isValid = false;
        } else if (!validateEmail(emailInput.value.trim())) {
            displayError(emailError, '请输入有效的邮箱地址。');
            isValid = false;
        }

        // 验证密码
        if (passwordInput.value.trim() === '') {
            displayError(passwordError, '密码不能为空。');
            isValid = false;
        } else if (passwordInput.value.trim().length < 6) {
            displayError(passwordError, '密码至少需要6个字符。');
            isValid = false;
        }

        return isValid;
    }

    loginForm.addEventListener('submit', async (event) => {
        event.preventDefault(); // 阻止表单默认提交行为

        if (validateForm()) {
            // 客户端验证通过，可以发送数据到服务器
            const email = emailInput.value.trim();
            const password = passwordInput.value.trim();

            // 模拟发送到服务器（实际应用中这里会是 fetch 或 XMLHttpRequest）
            try {
                // 假设服务器接口是 /api/login
                const response = await fetch('/api/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ email, password }),
                });

                const data = await response.json();

                if (response.ok) {
                    // 登录成功
                    alert('登录成功！欢迎 ' + data.username);
                    // 可以重定向用户或更新UI
                    // window.location.href = '/dashboard';
                } else {
                    // 登录失败，显示服务器返回的错误信息
                    displayError(generalError, data.message || '登录失败，请检查您的凭据。');
                }
            } catch (error) {
                console.error('登录请求出错:', error);
                displayError(generalError, '网络错误或服务器无响应，请稍后再试。');
            }
        } else {
            // 客户端验证未通过，错误信息已显示
            displayError(generalError, '请修正表单中的错误。');
        }
    });
});

fetch('/api/login', ...)

action

@

// 邮箱验证的正则表达式
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
// 使用示例
if (!emailRegex.test(emailInput.value)) {
    displayError(emailError, '请输入一个有效的邮箱地址，例如 user@example.com。');
    isValid = false;
}

indexOf('@')

if

// 密码强度验证：至少8位，包含大小写字母、数字和特殊字符
const passwordStrongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[!@#$%^&*()_+-=[]{};':"\|,.<>/?]).{8,}$/;
// 简单密码：至少6位，包含字母和数字
const passwordMediumRegex = /^(?=.*[a-zA-Z])(?=.*d).{6,}$/;

// 假设我们要求中等强度密码
if (!passwordMediumRegex.test(passwordInput.value)) {
    displayError(passwordError, '密码至少需要6位，并包含字母和数字。');
    isValid = false;
}

onblur

onkeyup

type

password

text

localStorage

sessionStorage