Implementation of Captcha in Javascript
2013-10-13 17:45
288 查看
http://www.codeproject.com/Articles/42842/Implementation-of-Captcha-in-Javascript
This Particular article helps you in implementing Captcha in you webpage / website or in an application.
Helps you in understanding and logical implentation of captcha on entirely client side.
Most of the websites use the technique of captcha for validation / verification purpose whenever someone tries accomplish membership or want to submit a piece of information. The generation of captcha can be done in various ways. We can use server side
scripting or even we can use client side scripting.
In most of the cases some times it happens that we need to have some additional resources / dlls to be registered on the hosting server in
order to implement the captcha basically this happens in case of server side scripting.Here I have implemented the Captcha functionality purely on the client side using javascript.
Generating Captcha using client side scripting is quite a simple but make sure that the javascript is enabled. Ya now a days almost all of the browsers supports the javascript. Anyways lets move towards the code details. the source code is quite simple and
straight forwad. Just copy and paste the below mentioned code in blank html page and save it as whatever you like. download /
copy an image and put in under same folder or at same location where the HTML file is created.
Collapse | Copy
Code
Onclick Event of button we are invoking the ValidCaptcha() method. Which in turns returns an boolean value i.e. True/False.
ValidCaptcha() Method compare's the entered code in the text box aganist the drawn or displayed code in the captcha box. RemoveSpaces(string) Method repoves the occurance of any blank spaces within the created as well as entered code. After all the both the
strings are compared by removing any blank spaces.
Based on the return value fron ValidCaptcha the result is displayed as either 'True' or 'False'. you can customize the return value to any user friendly message instead of true or false.
DrawCaptcha() Method is invoked to draw an captcha on the screen. On Click of refresh button we can generate/draw the new captcha images.
On body load I am calling DrawCaptcha() method so that whenever the page is loaded the default captcha should be drawn.
Here we go, Save the HTML page and open in the
web browser (IE/FF etc). Happy Coding........:)
Introduction
This Particular article helps you in implementing Captcha in you webpage / website or in an application.Helps you in understanding and logical implentation of captcha on entirely client side.
Most of the websites use the technique of captcha for validation / verification purpose whenever someone tries accomplish membership or want to submit a piece of information. The generation of captcha can be done in various ways. We can use server side
scripting or even we can use client side scripting.
Background
In most of the cases some times it happens that we need to have some additional resources / dlls to be registered on the hosting server inorder to implement the captcha basically this happens in case of server side scripting.Here I have implemented the Captcha functionality purely on the client side using javascript.
Using the code
Generating Captcha using client side scripting is quite a simple but make sure that the javascript is enabled. Ya now a days almost all of the browsers supports the javascript. Anyways lets move towards the code details. the source code is quite simple andstraight forwad. Just copy and paste the below mentioned code in blank html page and save it as whatever you like. download /
copy an image and put in under same folder or at same location where the HTML file is created.
Source Code
Collapse | Copy
Code
<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>
How does it works...
<input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>
Onclick Event of button we are invoking the ValidCaptcha() method. Which in turns returns an boolean value i.e. True/False.ValidCaptcha() Method compare's the entered code in the text box aganist the drawn or displayed code in the captcha box. RemoveSpaces(string) Method repoves the occurance of any blank spaces within the created as well as entered code. After all the both the
strings are compared by removing any blank spaces.
Based on the return value fron ValidCaptcha the result is displayed as either 'True' or 'False'. you can customize the return value to any user friendly message instead of true or false.
<input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" />
DrawCaptcha() Method is invoked to draw an captcha on the screen. On Click of refresh button we can generate/draw the new captcha images.
<body onload="DrawCaptcha();">
On body load I am calling DrawCaptcha() method so that whenever the page is loaded the default captcha should be drawn.Here we go, Save the HTML page and open in the
web browser (IE/FF etc). Happy Coding........:)
相关文章推荐
- Advanced Run Time Type Identification in C++ Part II(Property Library An Implementation of RTTI in C++)
- Get the content of an Iframe in Javascript – crossbrowser solution for both IE and Firefox
- 全面解析JavaScript里的循环方法之forEach,for-in,for-of
- Implementation of linked list in C
- Efficient ticket lock synchronization implementation using early wakeup in the presence of oversubscription
- Implementation of exception in Linux
- 3 ways of including JavaScript in HTML
- Implementation of Dependency Injection Pattern in C#
- JS:Trim() in javascript, how to define a function of checkinput for a WebControl(ascx)
- JavaScript里的循环方法:forEach,for-in,for-of
- javascript中的for...in & for...of的使用
- Get the content of an Iframe in Javascript – crossbrowser solution for both IE and Firefox
- JavaScript里的循环方法:forEach,for-in,for-of
- [转] Implementation of Fast Fourier Transform for Image Processing in DirectX 10
- javascript 对象及原型继承有关的属性:constructor、prototype、isPrototypeOf、instanceof、in 、hasOwnProperty 等等
- Get the content of an Iframe in Javascript – crossbrowser solution for both IE and Firefox
- javascript 对象及原型继承有关的属性:constructor、prototype、isPrototypeOf、instanceof、in 、hasOwnProperty 等等
- [Sonia] Implementation of a Binary Tree Sort in C
- An implementation of the skip list data structure written in C++
- JavaScript中forEach、for-in、for-of循环的比较