带有验证码的 Ajax Web 表单

Question

我正在尝试创建一个使用验证码的 ajax 联系网络表单。没有验证码的表单工作正常，我还可以让验证码自行工作（无需通过ajax验证）。

的 forms.js 这部分专门验证表单，然后将信息发布到

submitFu:function(){
_.validateFu()
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",
url:_.mailHandlerURL,
data:{
       name:$('.name input',_.form).val()||'nope',
       email:$('.email input',_.form).val()||'nope',
       phone:$('.phone input',_.form).val()||'nope',
       message:$('.message textarea',_.form).val()||'nope',
       owner_email:_.ownerEmail,
       stripHTML:_.stripHTML
      },
success: function(){
_.showFu()
}
    })          
        },
showFu:function(){
_.form.trigger('reset')
_.success.slideDown(function(){
setTimeout(function(){
_.success.slideUp()

    },_.successShow)
            })
                },

captcha.php 的

session_start();

//Check if the securidy code and the session value are not blank 
//and if the input text matches the stored text

if ( ($_REQUEST["txtCaptcha"] == $_SESSION["security_code"]) && 
(!empty($_REQUEST["txtCaptcha"]) && !empty($_SESSION["security_code"])) ) {
echo "<h1>True</h1>";
} 
else {
echo "<h1>Incorrect Security Code</h1>";
}

php 文件，这里是表单的 html（结果 div 旨在显示不正确的验证码）

<h4>Contact Form</h4>
            <form id="contact-form">
                <div class="success">Contact form submitted! We will be in touch soon </div>
                <fieldset>
                    <label class="name">
                        <input type="text" value="Name:">
                        <span class="error">*This is not a valid name.</span>
                        <span class="empty">*This field is required.</span>
                    </label>
                    <label class="email">
                        <input type="text" value="E-mail:">
                        <span class="error">*This is not a valid email address.</span>
                        <span class="empty">*This field is required.</span>
                    </label>
                    <label class="phone">
                        <input type="text" value="Phone:">
                        <span class="error">*This is not a valid phone number.</span>
                        <span class="empty">*This field is required.</span>
                    </label>
                    <label class="message">
                        <textarea>Message:</textarea>
                        <span class="error">*The message is too short.</span>
                        <span class="empty">*This field is required.</span>
                    </label>
                    <label for="captcha">Captcha</label>
                    <input id="txtCaptcha" type="text" name="txtCaptcha" value="" maxlength="10" size="32" /> 
                    <img id="imgCaptcha" src="create_image.php" />
                    <div id="result">&nbsp;</div>
                    <div class="btns">
                    <a class="button" data-type="reset">clear</a><a class="button" data-type="submit">send</a></div>
                </fieldset>

这是我 缺少验证码部分的脚本。我已经尝试过以下脚本，它本身可以很好地工作（不成为表单的一部分并且有自己的提交按钮），但我似乎无法让它与我上面发布的 forms.js 一起工作

function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Mozilla, Safari ...
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
} else {
//Display our error message
alert("Your browser doesn't support the XmlHttpRequest object.");
 }
}

//Our XmlHttpRequest object
var receiveReq = getXmlHttpRequestObject();

//Initiate the AJAX request
function makeRequest(url, param) {
//If our readystate is either not started or finished, initiate a new request
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
 //Set up the connection to captcha_test.html. True sets the request to asyncronous(default) 
 receiveReq.open("POST", url, true);
 //Set the function that will be called when the XmlHttpRequest objects state changes
 receiveReq.onreadystatechange = updatePage; 

 receiveReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 receiveReq.setRequestHeader("Content-length", param.length);
 receiveReq.setRequestHeader("Connection", "close");

 //Make the request
 receiveReq.send(param);
   }   
  }

 //Called every time our XmlHttpRequest objects state changes
function updatePage() {
//Check if our response is ready
if (receiveReq.readyState == 4) {
//Set the content of the DIV element with the response text
   document.getElementById('result').innerHTML = receiveReq.responseText;
   //Get a reference to CAPTCHA image
   img = document.getElementById('imgCaptcha'); 
   //Change the image
   img.src = 'create_image.php?' + Math.random();
  }
 }

 //Called every time when form is performed
 function getParam(theForm) {
 //Set the URL
 var url = 'captcha.php';
 //Set up the parameters of our AJAX call
 var postStr = theForm.txtCaptcha.name + "=" + encodeURIComponent( theForm.txtCaptcha.value );
 //Call the function that initiate the AJAX request
 makeRequest(url, postStr);

我知道它是很长而且信息量很大。非常感谢您的时间和帮助 }

Answer 1

为什么不使用 reCaptcha 作为您的验证码？它们拥有出色的 API，并已被证明是最安全的验证码。