简介
这个特殊的文章可以帮助你在实施网页/网站的验证码或在应用程序。帮助您理解和逻辑的完全客户端CAPTCHA implentation。
大多数网站使用的CAPTCHA技术审定/核查的目的,每当有人试图完成的成员或要提交的资料片。 CAPTCHA代以不同的方式可以做到。我们可以使用服务器端脚本,甚至我们可以使用客户端脚本。背景
在大多数情况下有时它会发生,我们需要有一些额外的资源/ DLL的托管服务器上注册,为了贯彻落实CAPTCHA基本上这种情况我已经实现在服务器端scripting.Here的情况下纯粹的客户端上使用JavaScript端的验证码功能。使用代码
生成验证码使用客户端脚本是相当简单,但请确保启用JavaScript。雅天几乎所有的浏览器支持的JavaScript。不管怎么说允许对代码的细节举动。源代码是相当简单和直接的forwad。只需复制并粘贴在下面空白的HTML页面的代码,并保存为任何你喜欢的的东西。下载/复制的图像,并放在同一文件夹下,或在同一位置创建的HTML文件。源代码
它是如何工作... ...LT;输入ID ="Button1quot;类型= quot; buttonquot;值= quot; Checkquot的onclick = quot;警报(ValidCaptcha());"/ GT;<html>
<head>
<title>Captcha</title>
<script type="text/javascript">
//Created / Generates the captcha function
function DrawCaptcha()
{
var a = Math.ceil(Math.random() * 10)+ '';
var b = Math.ceil(Math.random() * 10)+ '';
var c = Math.ceil(Math.random() * 10)+ '';
var d = Math.ceil(Math.random() * 10)+ '';
var e = Math.ceil(Math.random() * 10)+ '';
var f = Math.ceil(Math.random() * 10)+ '';
var g = Math.ceil(Math.random() * 10)+ '';
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
document.getElementById("txtCaptcha").value = code
}
// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2) return true;
return false;
}
// Remove the spaces from the entered and generated code
function removeSpaces(string)
{
return string.split(' ').join('');
}
</script>
</head>
<body onload="DrawCaptcha();">
<table>
<tr>
<td>
Welcome To Captcha<br />
</td>
</tr>
<tr>
<td>
<input type="text" id="txtCaptcha"
style="background-image:url(1.jpg); text-align:center; border:none;
font-weight:bold; font-family:Modern" />
<input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" />
</td>
</tr>
<tr>
<td>
<input type="text" id="txtInput"/>
</td>
</tr>
<tr>
<td>
<input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>
</td>
</tr>
</table>
</body>
</html>
的onclick事件的按钮,我们调用ValidCaptcha()方法。它返回一个布尔值,即真/假轮流。
ValidCaptcha()方法比较,在文本框中aganist绘制或显示的代码在验证码框输入的代码。 RemoveSpaces(String)方法repoves发生任何空格内以及进入代码。所有的字符串进行比较后删除任何空格。
结果显示为"真"或"假"的返回值前缘ValidCaptcha。您可以自定义任何用户友好的消息,而不是真或假的返回值。LT;输入类型="buttonquot; ID = quot; btnrefreshquot;值= quot; Refreshquot的onclick = quot; DrawCaptcha();"/ GT;
DrawCaptcha()方法被调用时在屏幕上绘制一个CAPTCHA。单击刷新按钮,我们可以生成/绘制新的captcha图像。LT;身体的onload ="DrawCaptcha();"GT;
在我的身体负荷DrawCaptcha()方法,使页面加载时默认CAPTCHA应当制定。
在这里,我们走,保存的HTML页面,并在Web浏览器(IE / FF等)中打开。跑马编码........:)