脚本怎样校验验证码输入

本文目录导读：

1. 前端JavaScript校验
2. 带倒计时和输入限制
3. 实时输入验证（带UI反馈）
4. 后端验证示例（Node.js）
5. 完整的前端验证示例

前端JavaScript校验

基础校验（纯数字验证码）

function validateCode(code) {
    // 清除空格
    code = code.trim();
    // 检查是否为空
    if (!code) {
        return { valid: false, message: '验证码不能为空' };
    }
    // 检查长度（假设6位数验证码）
    if (code.length !== 6) {
        return { valid: false, message: '验证码必须是6位' };
    }
    // 检查是否为纯数字
    if (!/^\d{6}$/.test(code)) {
        return { valid: false, message: '验证码必须为数字' };
    }
    return { valid: true, message: '验证码格式正确' };
}

支持字母数字混合

function validateMixedCode(code) {
    code = code.trim().toUpperCase(); // 统一转大写
    if (!code) {
        return { valid: false, message: '验证码不能为空' };
    }
    // 4-6位字母数字组合
    if (!/^[A-Z0-9]{4,6}$/.test(code)) {
        return { valid: false, message: '验证码格式错误' };
    }
    return { valid: true };
}

带倒计时和输入限制

class CodeValidator {
    constructor(options = {}) {
        this.length = options.length || 6;
        this.type = options.type || 'number'; // number, alphanumeric
        this.maxAttempts = options.maxAttempts || 5;
        this.attempts = 0;
        this.cooldown = 0;
    }
    validate(code) {
        // 冷却检查
        if (this.cooldown > 0) {
            return { valid: false, message: `请${this.cooldown}秒后重试` };
        }
        code = code.trim();
        // 基本校验
        if (!code) {
            return { valid: false, message: '请输入验证码' };
        }
        if (code.length !== this.length) {
            return { valid: false, message: `验证码长度需为${this.length}位` };
        }
        // 根据类型校验
        if (this.type === 'number' && !/^\d+$/.test(code)) {
            return { valid: false, message: '验证码必须为数字' };
        }
        if (this.type === 'alphanumeric' && !/^[A-Za-z0-9]+$/.test(code)) {
            return { valid: false, message: '验证码必须为字母或数字' };
        }
        return { valid: true, message: '验证码格式正确' };
    }
    checkAttempts() {
        this.attempts++;
        if (this.attempts >= this.maxAttempts) {
            this.startCooldown(30); // 冻结30秒
            return false;
        }
        return true;
    }
    startCooldown(seconds) {
        this.cooldown = seconds;
        const timer = setInterval(() => {
            this.cooldown--;
            if (this.cooldown <= 0) {
                clearInterval(timer);
                this.attempts = 0;
            }
        }, 1000);
    }
}

实时输入验证（带UI反馈）

<!-- HTML结构 -->
<div class="code-input">
    <input type="text" 
           id="captchaInput" 
           maxlength="6" 
           placeholder="请输入验证码"
           oninput="validateInput(this)">
    <span id="codeError" class="error-msg"></span>
</div>

// 实时验证函数
function validateInput(input) {
    const errorSpan = document.getElementById('codeError');
    const value = input.value;
    // 只允许输入数字
    input.value = value.replace(/[^0-9]/g, '');
    // 实时校验
    if (value.length > 0 && value.length < 6) {
        errorSpan.textContent = '验证码长度不够';
        input.style.borderColor = '#ff6b6b';
    } else if (value.length === 6) {
        errorSpan.textContent = '';
        input.style.borderColor = '#51cf66';
        // 自动触发验证
        autoVerify(value);
    } else {
        errorSpan.textContent = '';
        input.style.borderColor = '#ddd';
    }
}
function autoVerify(code) {
    console.log('自动验证输入:', code);
    // 这里可以调用后端验证
}

后端验证示例（Node.js）

// 后端验证中间件
const validateCaptcha = (req, res, next) => {
    const { code } = req.body;
    const sessionCode = req.session.captchaCode;
    // 检查验证码是否存在
    if (!sessionCode) {
        return res.status(400).json({
            success: false,
            message: '验证码已过期，请重新获取'
        });
    }
    // 忽略大小写比较
    if (code.toUpperCase() !== sessionCode.toUpperCase()) {
        req.session.captchaAttempts = (req.session.captchaAttempts || 0) + 1;
        // 超过尝试次数
        if (req.session.captchaAttempts >= 5) {
            delete req.session.captchaCode; // 清除验证码
            return res.status(400).json({
                success: false,
                message: '验证码错误次数过多，请重新获取'
            });
        }
        return res.status(400).json({
            success: false,
            message: '验证码错误',
            attempts: 5 - req.session.captchaAttempts
        });
    }
    // 验证通过，清除验证码防止重复使用
    delete req.session.captchaCode;
    delete req.session.captchaAttempts;
    next();
};

完整的前端验证示例

// 综合验证函数
function verifyCaptchaCode() {
    const codeInput = document.getElementById('captchaInput');
    const submitBtn = document.getElementById('submitBtn');
    const errorMsg = document.getElementById('errorMsg');
    const code = codeInput.value.trim();
    // 多种校验规则
    const rules = [
        { test: !code, message: '请输入验证码' },
        { test: code.length !== 6, message: '验证码必须为6位' },
        { test: !/^\d{6}$/.test(code), message: '验证码只能包含数字' },
        { test: isCodeExpired(), message: '验证码已过期' },
        { test: isCodeUsed(code), message: '验证码已被使用' }
    ];
    // 按规则校验
    for (let rule of rules) {
        if (rule.test) {
            errorMsg.textContent = rule.message;
            errorMsg.style.display = 'block';
            submitBtn.disabled = true;
            return false;
        }
    }
    // 校验通过
    errorMsg.style.display = 'none';
    submitBtn.disabled = false;
    return true;
}
// 监听输入事件
document.getElementById('captchaInput').addEventListener('input', function() {
    this.value = this.value.replace(/[^0-9]/g, ''); // 只允许数字
    if (this.value.length > 6) {
        this.value = this.value.slice(0, 6); // 限制长度
    }
    verifyCaptchaCode();
});

• 前端校验：实时反馈，提高用户体验
• 后端校验：安全性保障，防止绕过前端验证
• 校验规则：长度、格式、是否过期、尝试次数限制
• 安全性：防止暴力破解，设置尝试次数限制和冷却时间

根据你的具体需求选择适当的校验方式,建议前后端都做验证以确保安全性。