试图让验证码与我的验证一起工作答案

【问题标题】：Trying to get Captcha working alongside my validation试图让验证码与我的验证一起工作
【发布时间】：2014-12-17 17:12:33
【问题描述】：

我已设法使用 JS 验证我的文本框，但我知道我需要允许验证码与验证一起工作。

  <script>
  function validateForm() {
  var x = document.forms["reg"]["User"].value;
  var letters = "@";
  if (x.match(letters))
   { 
     alert("Can't Have Email Address As USERNAME!");
       return false;
      }

       return true;


    }

第一种形式

        <form name="reg" action="DBLogin.php" onsubmit="return validateForm()" method="post">

验证码：

    <form action="validate.php" method="post">
      Enter Image Text
       <input name="captcha" type="text">
        <img src="captcha.php" /><br>
      <input name="submit" type="submit" value="Register">
      </form>

有没有办法让验证码与我的 JS 验证一起工作？

谢谢

【问题讨论】：

是的，只需使用验证码... JS验证是客户端，PHP将验证发布的数据（服务器端）
我想要的是一个按钮能够调用验证表单以及js函数表单。因此，当按下按钮时，它将验证验证码以及文本字段，而不是为验证码提供单独的表单/按钮
然后将一个事件监听器绑定到处理验证码的提交按钮上......如果你了解 JS 事件的方式，这真的一点也不难
captcha 的全部意义在于数据/问题在浏览器上是隐藏的，因此只有一个人可以阅读它，而答案存储在服务器上。如果您可以在浏览器上验证验证码，那么您将必须能够访问浏览器上的答案，这意味着我可以查看您的 html/javascript 并知道答案。那会破坏整个目的。

标签： javascript php validation xhtml captcha

【解决方案1】：

使用 ajax 验证验证码。当他提交表单时，发送一个 ajax 请求来验证验证码。

只为验证码表单提供提交按钮。

<form id ="captcha-form" >
      Enter Image Text
       <input name="captcha" type="text">
        <img src="captcha.php" /><br>
      <input name="submit" type="submit" value="Register">
</form>

主要形式：

<form id="main-form" name="reg" action="DBLogin.php" method="post">
  <!-- this shoulnt have an submit button -->

现在使用js代码首先验证验证码并验证表单

$("#captcha-form").submit(function(event){
    
    // setup some local variables
    var $form = $(this);
    // let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");
    // serialize the data in the form
    var serializedData = $form.serialize();

    // let's disable the inputs for the duration of the ajax request
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);

    // fire off the request to /form.php
    request = $.ajax({
        url: "validate.php",
        type: "post",
        data: serializedData
    });

    // callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        if(response == "true")
          {
            validateform();
          }
    });

    // callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // handle error
        
    });

    // callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // reenable the inputs
        $inputs.prop("disabled", false);
    });

    // prevent default posting of form
    event.preventDefault();
});

现在是验证功能

function validateForm() {
  var x = document.forms["reg"]["User"].value;
  var letters = "@";
  if (x.match(letters))
   { 
     alert("Can't Have Email Address As USERNAME!");
       
      }

       $("#main-form").submit();


    }

正如 RiggsFolly 指出的那样，不建议这样做。因为这会破坏验证码的目的。

【讨论】：