2014-02-12 2 views
-2
<html> 
    <body> 
     <form action="Send_Contact_Us.php" method="post" onSubmit="return checkform(this);"> 
      <label>Name</label> 
      <input name="name" type="text" required="required" /> 
      <label>Email</label> 
      <input name="mail" type="email" required="required" /> 
      <label>Phone</label> 
      <input type="text" name="phone" pattern="[789][0-9]{9}" required="required" /> 
      <label>Comments</label> 
      <textarea name="comment" rows="3" cols="20" required="required"></textarea> 
      <label for="code">Write code below <span id="txtCaptchaDiv" style="color:#F00"></span> 
       <!-- this is where the script will place the generated code --> 
       <br/> 
       <input type="hidden" id="txtCaptcha" /> 
      </label> 
      <input type="text" name="txtInput" id="txtInput" size="30" onfocus="validatePass(document.getElementById('txtCaptcha'), this);" oninput="validatePass(document.getElementById('txtCaptcha'), this);" /> 
      <input type="submit" /> 
     </form> 
    </body> 
</html> 

이것은 JavaScript를 사용하여 텍스트 필드 위에 코드를 생성하려는 양식 코드입니다.html 형식의 자바 스크립트를 사용하여 텍스트 captcha를 만드는 방법

+0

하시기 바랍니다없는 다른 텍스트 보안 문자, 그들은 그렇게 평가 및 하드 가끔 있습니다. 대체 솔루션 사용 : http://blogoscoped.com/archive/2009-04-19-n82.html – Endless

+0

[무엇을 시도 했습니까?] (http://mattgemmell.com/what-have-you-tried/) 원하는 결과를 얻기 위해 시도한 것을 제공하십시오. StackOverflow는 제품을 요청할 수있는 사이트가 아닙니다. 그러나 문제를 해결하는 데 도움을 요청할 수 있습니다. – Cerbrus

+5

captcha 클라이언트 측을 생성하는 경우 클라이언트는 대답이 무엇인지 알 필요가 있으며 captcha가있는 객체를 패배시킵니다! – Quentin

답변

10
 <html> 
     <head> 
      <script type="text/javascript"> 
       function Captcha(){ 
        var alpha = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'); 
        var i; 
        for (i=0;i<6;i++){ 
         var a = alpha[Math.floor(Math.random() * alpha.length)]; 
         var b = alpha[Math.floor(Math.random() * alpha.length)]; 
         var c = alpha[Math.floor(Math.random() * alpha.length)]; 
         var d = alpha[Math.floor(Math.random() * alpha.length)]; 
         var e = alpha[Math.floor(Math.random() * alpha.length)]; 
         var f = alpha[Math.floor(Math.random() * alpha.length)]; 
         var g = alpha[Math.floor(Math.random() * alpha.length)]; 
         } 
        var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g; 
        document.getElementById("mainCaptcha").value = code 
        } 
        function ValidCaptcha(){ 
         var string1 = removeSpaces(document.getElementById('mainCaptcha').value); 
         var string2 = removeSpaces(document.getElementById('txtInput').value); 
         if (string1 == string2){ 
         return true; 
         } 
         else{   
         return false; 
         } 
        } 
        function removeSpaces(string){ 
        return string.split(' ').join(''); 
        } 
      </script>  
     </head> 
    <body onload="Captcha();"> 
     <table> 
      <tr> 
      <td> 
       Text Captcha<br /> 
      </td> 
      </tr> 
      <tr> 
      <td> 
      <input type="text" id="mainCaptcha"/> 
       <input type="button" id="refresh" value="Refresh" onclick="Captcha();" /> 
      </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> 

이것은 샘플 코드입니다. 이것은 텍스트 만 (단어 전용) 보안 문자입니다. ID가 'mainCaptcha'인 입력 HTML 태그의 테두리를 제거하고 제거하려면 배경 이미지를 추가 할 수 있습니다. 이 질문에 대한 답변을 바랍니다.

+1

감사합니다. 정말 도움이됩니다. www.shivit.com – 4302836

+0

순수한 클라이언트 측 노력은 서버 측 CAPTCHA 유효성 검사 솔루션에서 제공하는 보안을 제거합니다. –

1

대부분의 javascript 사용이 가능한 captcha는 봇에 대한 쉬운 패스입니다. 그러므로 그들은 captcha를 사용하는 목적에 봉사하지 않습니다.

나는 강력한 구글 reCAPTCHA를 사용하는 것이 좋습니다 :

https://www.google.com/recaptcha/

관련 문제