<form action="#" method="post" id="contactMsg">
<div class="row">
<div class="col-md-4">
<input name="name" id="name" required="required" type="text" placeholder="Name">
</div>
<div class="col-md-4">
<input name="email" id="email" required="required" type="text" placeholder="Email">
</div>
<div class="col-md-4">
<input name="subject" id="subject" required="required" type="text" placeholder="Subject">
</div>
<div class="col-md-12">
<textarea name="comments" id="comment" required="required" cols="10" rows="10" placeholder="Comments"></textarea>
</div>
<div class="col-md-12">
<input name="comment" id="ContactNow" type="submit" value="Submit">
</div>
</div>
</form>
//这里是Ajax代码
var formData = new FormData($("#contactMsg")[0]);
$.ajax({
url: 'contactMsg.php',
data:formData,
cache: false,
contentType:false,
processData:false,
type: 'post',
success: function(response) {
$("#contactMsg")[0].reset();
$("#SucessMsg").fadeIn('slow').delay(3000).fadeOut('slow');
}
});
我从不使用验证码。我真的不知道这个。请任何人有想法,而不是告诉我,我想添加验证码,然后在调用ajax之前验证它。 提前谢谢
答案 0 :(得分:0)
参见简单的例子:
$(document).ready(function(){
var a = (Math.ceil(Math.random()*9))+1;
var b = (Math.ceil(Math.random()*9))+1;
var queryText = a+" + "+b+"=";
document.getElementById('queryString').innerHTML=queryText;
var result = parseInt(a)+parseInt(b);
document.getElementById('actualResult').value=result;
});
function _validate(){
if(document.getElementById('actualResult').value == document.getElementById('result').value){
alert("matched");
}else{
alert("not matched");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form action="#" method="post" id="contactMsg">
<div class="row">
<div class="col-md-4">
<input name="name" id="name" required="required" type="text" placeholder="Name">
</div>
<div class="col-md-4">
<input name="email" id="email" required="required" type="text" placeholder="Email">
</div>
<div class="col-md-4">
<input name="subject" id="subject" required="required" type="text" placeholder="Subject">
</div>
<div class="col-md-12">
<textarea name="comments" id="comment" required="required" cols="10" rows="10" placeholder="Comments"></textarea>
</div>
<div class="col-md-12">
<label id="queryString"></label>
<input type="text" value="" id="result"/>
</div>
<input type="hidden" id="actualResult"/>
<div class="col-md-12">
<input name="comment" id="ContactNow" type="button" value="Submit" onclick="_validate();">
</div>
</div>
</form>
</body>
说明:当页面加载时,我们生成随机数并生成查询字符串并在隐藏字段中生成实际结果。当用户提交时,我们检查了用户输入的隐藏字段输入。如果匹配则我们通过,如果没有,我们就阻止了。
答案 1 :(得分:0)
您可以使用此代码,其工作正常 you may download captcha images from given link
var val=[];
val.push("VQ7W3"); /** push value in this array */
val.push("A1234"); /** To maintain image order here */
val.push("A32BD"); /** if first image 0_capt.jpeg contains value VQ7W3 so push this value into zero(0) index of array */
val.push("LD673");
val.push("PQ78V");
val.push("MX81W");
var x;
/**This below method generate random number from 0-5
* name of image starts with that number will set on
* captcha location
*/
function myFunction() {
x = Math.floor(Math.random() * 6); // here 6 stand for how many images you are using return 0-6 number.
$("#imgCaptchaPlace").html("<img id='abc' src='captcha_images/"+x+"_cpt'/><br>"+val[x]) ;
}
myFunction();
/**
* This below method will call on change of input fields where user enter
* captcha code value
*/
function chaeckCpatch(id)
{
if($("#"+id).val()==val[x])
{
alert("match");
}
else
{
alert("No match");
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<!-- below div use to display captcha image -->
<div id="imgCaptchaPlace"></div>
<!-- below textfield where user enter captcha value -->
<input type="text" id="captchaText" onchange="chaeckCpatch(this.id);"/>
<!-- include this JS file -->
<script src="captchByAarif.js" type="text/javascript"></script>
</body>
</html>