问题

验证码是预防恶意程序自动注册、登陆、灌水等操作的关键技术之一。常见的验证码技术是将一串随机生成的数字转化为图片，并在图片中添加一些干扰元素。用户通过观察图片后，在表单中输入验证码，提交到服务器端进行验证。

本文将介绍如何利用JavaScript技术制作网页随机验证码。

方法

利用JavaScript实现n位数字字母验证码的步骤如下：

（1）创建HTML页面

在HTML页面建立刷新按钮和验证码显示位置；

             

效果：

图1.1 HTML效果图

在这里我们使用span标记我们的验证码列。它显示某行内的独特样式，在这里可以更好的显示产生的验证码。为了保证后面的程序的正常运行，一定不要省略id属性及修改取值。

（2）新建JavaScript文件

新建JavaScript文件，命名为getCode.js，保存在与HTML文件相同的位置。在getCode.js文件中键入以下代码。

/*产生随机数的函数*/

function validateCode(n){

       /*验证码中可能包含的字符*/

       var  s ="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

       var  ret = "";//保存生成的验证码

       /*利用for循环，随机产生验证码中的每个字符*/

       for(var  i=0;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的对象中显示该随机数。

（3）HTML中键入JavaScript文件

在HTML中键入JavaScript代码，具体代码如下：

（4） HTML中修改“刷新”按钮

在HTML中修改“刷新”按钮，具体代码如下：

（5）最终实现效果如下所示：

图1.5随机生成验证码

结语

本次的例子使用了两种方法为对象增加事件，onclick事件和onload事件，从而实现n位数字字母验证码的输出问题。故而在JavaScript的学习中要熟练的掌握JavaScript事件，通过发生的事件来驱动函数执行，才能更好的将JavaScript与HTML相结合。