Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Captcha Implementation with Javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 731
    Comment on it

    Hello!! 

    Captcha is stands for "Completely Automated Public Turing test to tell Computers and Humans Apart". It is a test for checking that the response is coming from human. People have tried to abuse the site for the sport and the profit. Captcha is used to protect the website from the attack and accessing the website by machines.

    Modern CAPTCHA are design with the three separate abilities:-

    • Invariant Recognition:- It is the availability to recognize the variation in the shape of letters.Their is a lot of variation in the shape of the letter which can identify by the human but not by the computer. Teaching the computer to identify all the variation is about impossible. 
    • Segmentation:- It deals with the space between the two letters. In captcha, their is no white spaces are available and crowded by the letters.
    • Parsing to correctly:-  The computer must identifies each character correctly.

    We can implement the captcha in multiple ways:-

    1) Servlet Implementation

    2) JavaScript Implementation

    JavaScript Implementation:- In javascript, we uses the method to generate the random text and also validate it. Using javascript, we do not need send data to the server for the validation. This helps in time complexity problems. We generate the text on body load. We uses Math.random() function to generating the random character.

    Code:-

    HTML:-

    1. <tr>
    2. <td>&nbsp;Please enter the security code: </td>
    3. <td valign="top"> <input type="text" id="txtInput"style="width:99px; height:38px;"/>
    4. <input type="text" id="txtCaptcha" size="12"
    5. style="background-image:url(/phpdocs/captcha.gif); font-size:30px;text-align:center; border:none;
    6. font-weight:bold; font-family: 'Curlz MT'; font-stretch: ultra-expanded" /> </td>
    7. </tr>

    JavaScript:-

    1. function DrawCaptcha() {
    2. var a = 49, b = 65;
    3. var c = 100;
    4. var d = 70;
    5. document.feedback.reset();
    6. rancolour();
    7. var element = document.getElementById('txtCaptcha');
    8. element.onselectstart = function () { return false; } // ie
    9. element.onmousedown = function () { return false; } // mozilla
    10. if (a == 49) {
    11. a = 57;
    12. }
    13. var main = document.getElementById('txtCaptcha');
    14. main.value ="";
    15. var a1 = String.fromCharCode(64+Math.random()*10+1);
    16. var b1 =String.fromCharCode(64+(Math.random()*10)+1); javascript:void(0)
    17. var c1 = String.fromCharCode(64+(Math.random()*10)+1);
    18. var d1 = String.fromCharCode(64+(Math.random()*10)+1);
    19. main.value = a1 +" "+ b1 +" "+ c1 + " "+d1+" "+ String.fromCharCode(64+(Math.random()*10)+2)+ " "+String.fromCharCode(64+(Math.random()*10)+1);
    20. //alert(main.value)
    21. }

     

    Output:-

    Now we have the output but here is a problem, we have to remove the space between character for validating it. So, here is the code for removing space:-

    1. function removeSpaces(string)
    2. {
    3. return string.split(' ').join('');
    4. }

    Now, we can validate it using another block of code:-

    1. ar str1 = removeSpaces(document.getElementById('txtCaptcha').value);
    2. var str2 = document.getElementById('txtInput').value;
    3. if (str1.toLowerCase() != str2.toLowerCase()) {
    4. alert("Security code entered is not matching.please try again");

      

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: