如何快速、轻松地在你网页表单里制作一个简单的Javascript文字（非图片）验证码

如果你要搜索asp,php图片验证码，你可能会得到一大堆可参考的源码。基本上这些都是利用图片生成技术。但是我认为一些简单的随机数字或文字也可以做到这些效果。正巧，最近我必须将我所有的网页表单加上一个验证码以免被人恶意连接以至于产生不必要的表单数据和电子邮件。所以我就决定不借用别人的源码，自己花一点时间把我的上述想法付诸现实。

因为我的网页有 ASP, ASP.NET 也有 PHP 的，所以一个跨网页程序语言的小工具十分有用。Javascript 是我的首选，经过几分钟的摸索，我得到了下面这个简单易运用的小Javascript脚本。你们也可以试一试看！

 

生成一个 Javascript 脚本文件，里面有一个新的文本输入框，隐含表单值和随机产生的文字或数字。

在这个新的脚本里，利用Math.random函数可以快速生成一个4位数的随机数字。

//产生一个四位数的随机数字
var i=parseInt(Math.random()*8999 + 1000);

//新增一个文本输入框到你的网页表单
document.write('<input type="text" name="code_verfiy" value="" />');

//将刚产生的那个随机值赋予给一个新的表单隐含值
document.write('<input type="hidden" name="code" value="' + i + '" />');

//再将刚产生的那个随机值显示出来，从而网页访问者可以照此填写那个新的文本输入框
document.write('<label style="" >' + i + '</label>')

通过脚本调用可以将这个 Javascript 脚本文件放到你的所有网页表单里

调用这个脚本的位置一般来说是放到你提交表单的那个按钮之前。假设我刚才生成的那个脚本文件叫code.js，你的代码会是这样的:

<form name="myForm" action="save.asp">
...... //其他表单内容
<label>Verify Code</label> <script language="JavaScript" type="text/javascript" src="code.js"></script>
....
<input type="submit"....>
</form>

最后，增加一段判断代码来确定提交的表单数据是否来自你的网页本身

不管你是运用同一或单独文件来处理你的表单，你都可以十分简单地加一段代码来判断是否那个随机值被键入。下面的这段代码是用 ASP (VB) 语言写的，如果你使用asp.net，php等，你可以运用它们自己的语法来修改。

'//首先，判断是否有你设定的code_verify值，然后，判断是否匹配你设的那个隐含值 (ASP VB)
If Request.Form("code_verify") = "" OR Request.Form("code_verfiy") <> Request.Form("code") Then
'//如果没有匹配，则停止执行，显示错误信息
Response.write ("error, do not access to this page directly")
Response.End()
Else
'//匹配，一切正常。这下面就是你没有验证码之前的代码。
End If

其他可以改善的地方

好了，你已经有一个可以使用的文本验证码了。如果你还想花时间，你可以将它改的更好。

首先申明，我只在我的网站上测试过，你下载并使用在你自己网站上所带来的所有可能风险，本人概不负责。

好，首先我们可以将那段生成文本输入框的代码从javascript脚本里直接移到你的表单里，这样，你可以用一些客户端脚本来判断它是否被填写。

当然，你还可以增加一些样式使你显示的随机数值看起来像流行的图片验证码，比方说增加一个边框，改变背景和文字颜色等等 (像这个 1234 )。

还有，你也多写一些Javascript来随机产生一些除数字以外的字母等等。

祝大家编程快乐

如果你想参考我的英文原文，请点这 How to create a simple non image validation bar in your web form quickly （http://eblog.lichao.net/archives/2007/programming/web-design/52/）

Technorati : Javascript, 网页编程
Del.icio.us : Javascript, 网页编程