js案例---验证码

article/2025/11/6 1:52:31

我们在进行注册与登录时，常常会有验证码的使用，今天我们来用js实现验证码的功能

我们先写网页的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册表</title><style>#div1 {width:100px;height:30px;border:1px solid black;text-align:center;line-height:30px;font-size:20px;}</style></head>
<body>
<form action="" method="get" ><table align="center" border="1px solid black" style="background-color: #3afffd"><tr><td>账号:</td><td><input type="text" name="username" required></td></tr><tr><td>密码:</td><td><input type="password" name="password" required></td></tr><tr><td>邮箱:</td><td><input type="email" name="emails" required></td></tr><tr><td>年龄:</td><td><input type="number" name="ages" required></td></tr><tr><td>性别:</td><td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td></tr><tr><td>爱好:</td><td><input type="checkbox" name="hobby" checked value="sing">唱<input type="checkbox" name="hobby" value="jump">跳<input type="checkbox" name="hobby" value="rap">rap<input type="checkbox" name="hobby" value="Basketball">篮球</td></tr><tr><td>头像:</td><td><input type="file"></td></tr><tr align="center"><td>验证码:</td><td><button onclick="btnClick();" style="border: 1px solid #3afffd;background-color: #3afffd"><div id="div1">获取验证码</div></button><p><label for="cg"/><input type="text" id="cg"></p></td></tr><tr align="center"><td colspan="2"><button onclick="btClick();" style="border: 1px solid #3afffd;background-color: #3afffd"><input type="submit" value="注册"></button></td></tr></table>
</form>
</body>
</html>

这样我们就得到了这样的效果：

我们接下来书写js

首先我们先获取到验证码的div，给它加一个点击事件

let divEle = document.querySelector("#div1")//获取验证码盒子divEle.addEventListener("click", function () {})

1.纯数字验证码

封装函数

定义一个数组变量且为空，使用for循环取一个随机数，并且使用push方法将这个数添加到数组中

然后修改验证码的内容为函数中的随机数代码如下：

代码如下：

let divEle = document.querySelector("#div1")divEle.addEventListener("click", function () {divEle.innerHTML = numTestCode(6)})// 纯数字验证码function numTestCode(n) {var arr = [];for (var i = 0; i < n; i++) {var num = parseInt(Math.random() * 10);arr.push(num);}return arr.join('');}

效果如下：

出现数字验证码并且可以点击切换

2.数字加字母验证码

因为验证码中要出现字母所有我们需要用到String.fromCharCode()方法

String.fromCharCode()可以将 Unicode 编码转为一个字符

例

var n = String.fromCharCode(65);

n 输出结果:

由A到z，Unicode编码65到122

所有我们可以用if语句通过随机数来实现字母验证码

js代码如下:

let divEle = document.querySelector("#div1")divEle.addEventListener("click", function () {divEle.innerHTML = testCode(6)})// 数字加字母验证码function testCode(n) {var arr1 = [];for (var i = 0; i < n; i++) {var nums = parseInt(Math.random() * 123);if (nums >= 65 && nums <= 90 || nums >= 97 && nums <= 122) {arr1.push(String.fromCharCode(nums));} else if (nums >= 0 && nums <= 9) {arr1.push(nums);} else {i--;}}return arr1.join('');}