試圖讓驗證碼旁邊我的驗證

Question

工作，我已經成功地驗證使用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驗證的一種方式？

謝謝

Answer 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指出這是不推薦。因爲這會挫敗驗證碼的目的。