4.2.5 验证码页面的生成

在网页制作中，无论登录论坛还是聊天室，都加入了验证码信息。在通常情况下，验证码都是由4位数字或4个汉字组成的，每刷新一次更换一次。无论数字还是汉字，其实都是做成的图片，它们唯一不同的是数字只要做成10幅图片即可，而汉字则要做得多一些，否则在随机变换中获得同样汉字的概率就要高些。

由于每次获取的图片都是不同的，所以首先想到的是随机数的应用，其二是图片做成后，怎样获取这些图片。其实只要把做成的图片存放在数组中，当需要的时候，每次提取出4个，这样就会形成连续的图片。而所谓的验证就是看在定义的文本框中所输入的内容与显示的图片内容是否相同，不相同，或者是错误的，则重新输入，直到正确输入才可以登录。

本网站的验证码使用的是数字，因此，首先要利用软件制作10幅图片（本书中的图片是用Flash制作的，大家对其他软件使用较熟悉，可以用其他软件来完成，另外本网站所需的各种动画均用Flash制作完成）。如果是文字，可以做得多一些。做好的图片存成gif格式，并要单独存储在网站根目录下的单独文件夹内，如图4-18所示。

图4-18

验证码内图片单独做在了一个页面中，并把它嵌入到了登录页面内。验证码页面的显示效果如图4-19所示。

图4-19

下面就来分析一下验证码页面代码的构成。

验证码页面所在的文件是yanma.asp，其代码构成如下。

1．<%

2．jt=array("yanphoto/0.gif","yanphoto/1.gif","yanphoto/2.gif","yanphoto/3.gif", "yanphoto/

3．4.gif","yanphoto/5.gif","yanphoto/6.gif","yanphoto/7.gif","yanphoto/8.gif", "yanphoto/

4．9.gif")

5．for i=1 to 4

6．randomize

7．jt1=int(10*rnd)

8．response.write "<img src="&jt(jt1)&" border=0 height=20 width=20 />"

9．lyp=lyp&jt1

10．next

11．%>

代码释义：

根据上面分析，这段代码就比较容易理解。

第2~4行，在网页中首先定义一个数组，并设置数组中各元素的值，各值即各个图片，每个图片一定要带好路径，因为要把提取数组中的值作为图片的源路径，所以图片的路径一定要写准确，否则就会显示错误。

第5~10行，使用一个for循环，由于在验证信息中只显示4张图片，所以for循环语句的I值从1~4，即提取数组中的4个元素。因为是随机提取，所以首先要建立一个随机数生成器randomize，即第6行，然后用Rnd函数，返回一个大于或等于0而小于1的随机数，为了使返回的值符合要求，需要用到一个获取随机数的公式：int（(最大值－最小值+1)＊rnd()+最小值）。因为在这里获取的是一位数，所以最大的一位数是9，最小的是0，所以获得的随机数为jt1=int(10*rnd)，即第7行代码。将这个随机数作为数组的索引，这样就可以获得数组中的值，即jt(jt1)，将它作为图片的源，即src="&jt(jt1)。

由于是提取了4次，需要把这4个图片累加起来，累加的形式可以用lyp=lyp&jt1，这样lyp这个变量就是最后4张图片。

分析到这里，再返回到log.asp代码页面的第18和19行，即<input type="hidden" ，name="c_yan" value="<%=lyp%>" />，用一个隐藏域传递了<%=lyp%>的值，而<%=lyp%>的值正是随机数值的叠加，当网页提交时就可以与输入的文本内容进行比较了。

经过以上分析，下面看一下登录页面提交后是怎样处理的。提交后的URL网页名称为lognext.asp，其代码构成如下。

1．

2．<%

3．dim user,password,yan,c_yan

4．user=request.Form("user")

5．password=request.Form("password")

6．yan=request.Form("yan")

7．c_yan=request.Form("c_yan")

8．sql="select * from user where user='"&user&"'and password='"&password&"'"

9．rs.open sql,conn,1,1

10．if not rs.eof and yan=c_yan then

11．response.Cookies("log")("user")=user