当前位置：首页 > JavaScript

js实现留言验证

2026-04-07 14:20:55JavaScript

实现留言验证的 JavaScript 方法

客户端验证

使用 JavaScript 在表单提交前进行基本验证，确保用户输入符合要求。

document.getElementById('commentForm').addEventListener('submit', function(event) {
    const name = document.getElementById('name').value.trim();
    const email = document.getElementById('email').value.trim();
    const message = document.getElementById('message').value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (name === '') {
        alert('请输入姓名');
        event.preventDefault();
        return;
    }

    if (!emailRegex.test(email)) {
        alert('请输入有效的邮箱地址');
        event.preventDefault();
        return;
    }

    if (message.length < 10) {
        alert('留言内容至少需要10个字符');
        event.preventDefault();
        return;
    }
});

服务端验证

即使通过客户端验证，仍需在服务端进行二次验证以防止绕过前端检查。

js实现留言验证

// Node.js 示例
app.post('/submit-comment', (req, res) => {
    const { name, email, message } = req.body;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!name || !email || !message) {
        return res.status(400).send('所有字段均为必填');
    }

    if (!emailRegex.test(email)) {
        return res.status(400).send('无效的邮箱格式');
    }

    if (message.length < 10) {
        return res.status(400).send('留言内容过短');
    }

    // 通过验证，处理留言
    // ...
});

验证码集成

防止自动化提交，可添加验证码功能。

<!-- reCAPTCHA 示例 -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>

// 验证 reCAPTCHA
function validateCaptcha() {
    const response = grecaptcha.getResponse();
    if (response.length === 0) {
        alert('请完成验证码');
        return false;
    }
    return true;
}

输入过滤

防止 XSS 攻击，对用户输入进行过滤。

js实现留言验证

function sanitizeInput(input) {
    return input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

实时反馈

提供实时验证反馈，提升用户体验。

document.getElementById('message').addEventListener('input', function() {
    const length = this.value.length;
    const feedback = document.getElementById('length-feedback');
    feedback.textContent = `${length}/100`;
    if (length < 10) {
        feedback.style.color = 'red';
    } else {
        feedback.style.color = 'green';
    }
});

防重复提交

防止用户多次提交相同内容。

let lastSubmitTime = 0;
document.getElementById('commentForm').addEventListener('submit', function(event) {
    const currentTime = Date.now();
    if (currentTime - lastSubmitTime < 30000) {
        alert('30秒内只能提交一次');
        event.preventDefault();
        return;
    }
    lastSubmitTime = currentTime;
});