帶驗證碼的Ajax webform

我正在嘗試創建一個使用驗證碼的ajax聯繫人窗體。沒有驗證碼的表單工作正常，我也可以讓驗證碼自行工作（無需通過ajax驗證）。帶驗證碼的Ajax webform

這裏是我的forms.js這部分專門驗證表單，然後張貼信息的PHP文件

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>"; 
}

，這裏是爲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);

我知道它很長很多的信息。非常感謝您的時間和幫助 }

來源

2012-01-29 Fahad

爲什麼不使用reCaptcha作爲您的驗證碼？他們有一個輝煌的API，並被證明是最安全的驗證碼。

來源

2012-01-30 03:50:39 Joshua

帶驗證碼的Ajax webform

回答

相關問題