本文目录导读：
前端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();
});
- 前端校验：实时反馈，提高用户体验
- 后端校验：安全性保障，防止绕过前端验证
- 校验规则：长度、格式、是否过期、尝试次数限制
- 安全性：防止暴力破解，设置尝试次数限制和冷却时间
根据你的具体需求选择适当的校验方式,建议前后端都做验证以确保安全性。
