原生JS实现指定位数验证码生成逻辑
作者:半夏时间:2026-10-23 23:06:41浏览:154
本文介绍如何使用原生JavaScript生成指定位数的验证码。核心思路利用String.fromCharCode将随机数转换为大小写字母,结合数字随机生成数组元素。通过遍历确保最终结果中同时包含字母和数字,若缺失则进行修正替换,最后拼接为字符串返回。
原生JS验证码生成原理
利用原生JavaScript实现指定长度验证码的生成,生成的验证码内容需同时包含字母与数字字符。
实现思路主要依赖String对象的fromCharCode方法,将特定范围内的随机数值转换为对应的大小写英文字母。程序通过随机数决定数组当前索引位置填充大写字母、小写字母还是数字。函数接收一个参数作为生成数组的长度,填充完毕后对数组元素进行校验:若生成的数组中完全不含数字,则随机选取一个字母位置替换为随机数字;若完全不含字母,则随机选取一个数字位置替换为大写或小写字母;若已同时包含字母和数字,则保持现状。所有判断逻辑执行完毕后,调用数组的join方法将元素拼接为字符串并返回结果。
核心代码实现
function verificationCode(num) {
var arr = [];
var letterFlag = false;
var numberFlag = false;
for (i = 0; i < num; i++) {
// 获取随机大写字母
var uppercase = String.fromCharCode(Math.round(Math.random() * 25 + 65));
// 获取随机小写字母
var lower = String.fromCharCode(Math.round(Math.random() * 25 + 97));
// 获取随机数字
var number = Math.round(Math.random() * 9);
// 获取0-2的随机数来随机决定该位置是大写字母,小写字母或者是数字
var temp = Math.round(Math.random() * 2)
if (temp == 0) {
arr[i] = uppercase;
} else if (temp == 1) {
arr[i] = lower;
} else {
arr[i] = number;
}
}
// 检查arr是否同时有字母与数字
for (var j = 0; j < arr.length; j++) {
if (Object.prototype.toString.call(arr[j]) == "[object String]") {
letterFlag = true;
}
if (typeof(arr[j]) == 'number') {
numberFlag = true;
}
}
// 对不同情况做处理
// 字母数字都有
if (letterFlag && numberFlag) {
return arr.join("");
}
// 没有字母时
if (letterFlag == false && numberFlag == true) {
uppercase = String.fromCharCode(Math.round(Math.random() * 25 + 65));
lower = String.fromCharCode(Math.round(Math.random() * 25 + 97));
temp = Math.round(Math.random() * 1)
if (temp == 0) {
arr[Math.round(Math.random() * (num - 1))] = uppercase;
} else {
arr[Math.round(Math.random() * (num - 1))] = lower;
}
return arr.join("");
}
// 没有数字时
if (letterFlag == true && numberFlag == false) {
number = Math.round(Math.random() * 9);
arr[Math.round(Math.random() * (num - 1))] = number;
return arr.join("");
}
}
var code = verificationCode(10);
console.log(code);
代码运行效果展示

以上内容为本文的全部分享,希望能为读者的学习提供辅助,同时也欢迎读者继续支持本站。
作者最新文章
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
