如何防止用户重复输入电子邮件？

防止用户重复输入电子邮件主要涉及前端验证和后端验证两个方面。以下是详细解答：

基础概念

前端验证：在用户提交表单之前，通过JavaScript等前端技术进行验证。
后端验证：在用户提交表单后，通过服务器端代码进行验证。

类型

唯一性检查：检查电子邮件是否已经存在于数据库中。
格式验证：验证电子邮件格式是否正确。

应用场景

注册页面
重置密码页面
订阅服务

前端验证示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Validation</title>
    <script>
        function validateEmail(email) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }

        function checkEmailExists(email) {
            // 这里可以调用后端API进行验证
            // 示例代码省略了实际的API调用
            return false; // 假设返回false表示邮箱不存在
        }

        function onSubmit(event) {
            event.preventDefault();
            const emailInput = document.getElementById('email');
            const email = emailInput.value;

            if (!validateEmail(email)) {
                alert('请输入有效的电子邮件地址');
                return;
            }

            if (checkEmailExists(email)) {
                alert('该电子邮件地址已被注册');
                return;
            }

            // 提交表单
            document.getElementById('emailForm').submit();
        }
    </script>
</head>
<body>
    <form id="emailForm" onsubmit="onSubmit(event)">
        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">提交</button>
    </form>
</body>
</html>

后端验证示例代码（Node.js + Express）

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const { check, validationResult } = require('express-validator');

app.use(bodyParser.urlencoded({ extended: true }));

// 假设有一个数据库模型User
const User = require('./models/User');

app.post('/register', [
    check('email').isEmail().withMessage('请输入有效的电子邮件地址'),
], async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
        return res.status(400).json({ errors: errors.array() });
    }

    const { email } = req.body;

    try {
        const existingUser = await User.findOne({ email });
        if (existingUser) {
            return res.status(400).json({ message: '该电子邮件地址已被注册' });
        }

        // 创建新用户
        const newUser = new User({ email });
        await newUser.save();

        res.status(200).json({ message: '注册成功' });
    } catch (err) {
        res.status(500).json({ message: '服务器错误' });
    }
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});