微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
网站为了防止用户利用机器人自动注册、登陆和灌水，都会采用验证码技术。验证码技术其实就是把一串随机的数字生成图片，在图片中添加一些干扰元素，用户采用肉眼识别输入验证码，给后台提交数据完成验证。接下来就来讲解一下如何利用JavaScript制作网页随机验证码。
解决方案
1.n位数字字母验证码
1.1创建HTML页面
在HTML页面建立刷新按钮和验证码显示位置；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript制作网页随机验证码</title> </head> <body> <span id="msg"></span> <input type="button" value="刷新" /> </body> </html> |
效果：
图1.1 HTML效果图
在这里我们使用span标记我们的验证码列。它显示某行内的独特样式，在这里可以更好的显示产生的验证码。为了保证后面的程序的正常运行，一定不要省略id属性及修改取值。
1.2 新建JavaScript文件
新建JavaScript文件，命名为getCode.js，保存在与HTML文件相同的位置。在getCode.js文件中键入以下代码。
/*产生随机数的函数*/ function validateCode(n){ /*验证码中可能包含的字符*/ var s ="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; var ret = "";//保存生成的验证码 /*利用for循环，随机产生验证码中的每个字符*/ for(var i=0;i<n;i++){ var index = Math.floor(Math.random()*62);//随机产生一个0~62位的数值 //将随机产生的数值作为字符串的小标，在字符串s中取出该字符串，并入ret中 ret += s.charAt(index); } return ret;//返回产生的验证码 } /*显示随机数函数*/ function show(){ //在id为msg的对象中显示验证码 document.getElementById("msg").innerHTML = validateCode(4) } window.onload = show; //页面加载时执行函数show |
在getCode.js文件中，validateCode函数主要用于产生指定位数的随机数，并返回该随机数。函数show主要时调用validateCode函数，并在id为msg的对象中显示该随机数。
1.3 HTML中键入JavaScript文件
在HTML中键入JavaScript代码，具体代码如下：
<script src="js/getCode.js" type="text/javascript"></script> |
1.4 HTML中修改“刷新”按钮
在HTML中修改“刷新”按钮，具体代码如下：
<input type="button" value="刷新" οnclick="show()"/> |
1.5 效果
图1.5随机生成验证码
结语
本次的例子使用了两种方法为对象增加事件，onclick事件和onload事件，从而实现n位数字字母验证码的输出问题。故而在JavaScript的学习中要熟练的掌握JavaScript事件，通过发生的事件来驱动函数执行，才能更好的将JavaScript与HTML相结合。
END
主 编 | 王楠岚
责 编 | 杨金月
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
“写留言”发表评论，期待您的参与！期待您的转发！
