Thursday, April 24, 2014

Implementation of Captcha in Javascript

Implementation of Captcha in Javascript 

captcha helps us in understanding and logical implentation of captcha on entirely client side.

Generating Captcha using client side scripting is quite a simple but make sure that the javascript is enabled. Anyways lets move towards the code details.
the source code is quite simple and straight forward.

Source 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> 
 
 

No comments:

Post a Comment

GitHub repository using Git Bash command

  To add a project to a GitHub repository using Git Bash command line, you can follow these steps: Create a new repository on GitHub by logg...