Tuesday 3 June 2014

How to create Captcha Image in Asp.net with javascript

<html>
<head>
<title>Captcha Validation</title>

<STYLE>
// CSS is use for just formatting
.input_img 
{
 background-image: url("captcha.png"); 
text-align: center;
 border: medium none;
  font-weight: bold;
  font-family: Modern;
  height: 80px;
 width: 150px;
 font-size: 14px;
}

.align
{
 margin: 0 auto;
 width: 250px;
 
 }

</STYLE>
    <script type="text/javascript">  
    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
    }
    function ValidCaptcha(){
        var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
        var str2 = removeSpaces(document.getElementById('txtInput').value);
        if (str1 == str2) return true;        
        return false;
  }

    function removeSpaces(string)
    {
        return string.split(' ').join('');
    }
  </script>
    
    
    
</head>
<body onload="DrawCaptcha();">
<div class="align">
        Welcome To Captcha<br />
      <input id="txtCaptcha" type="text" readonly="" class="input_img">
      <input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" /><br>
  <input type="text" id="txtInput"/>    
  <input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>
      </div>
</body>
</html>

The result will shows something like this

image
- See more at: http://codingresolved.com/discussion/540/how-to-make-captcha-in-javascript/p1#sthash.vkreVXdE.dpuf

No comments:

Post a Comment