Question

<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在文本字段上方生成代码的表单代码。

Answer 1

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

这是示例代码。这是纯文字（仅限单词）Captcha。如果需要，可以添加背景图像，并删除id为'mainCaptcha'的输入html标记的边框我希望这能回答你的问题。

Answer 2

大多数启用了JavaScript的验证码都很容易通过机器人。因此，它们不能用于使用验证码。

我建议使用功能强大的Google reCAPTCHA：

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

如何使用html格式的javascript创建文本验证码

2 个答案: