我正在使用验证jquery插件和recaptcha作为联系表单我想知道如何在表单获取之前检查验证码中的代码是否正确如果不发送错误消息，因为现在验证一切但是我插入了错误的代码，无论如何都要提交表单。这是我的代码ty提前为anyhelp
<script type="text/javascript">
var RecaptchaOptions = {
lang : 'en',
theme : 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script>
<form id="contact" method="post" action="#">
<fieldset>
<label for="name_contact">NAME</label>
<input type="text" class="input-xlarge" id="name_contact" name="name_contact" value="" placeholder="" minlength="2">
<label for="email_contact">EMAIL</label>
<input type="email" class="input-xlarge" id="email_contact" name="email_contact" value="" placeholder="">
<label for="telephone">CONTACT NUMBER</label>
<input type="tel" class="input-xlarge" id="telephone" name="telephone" placeholder="" value="" >
<label for="message">MESSAGE</label>
<textarea id="message" class="input-xlarge" name="message" placeholder="" rows="5"></textarea>
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
<span class="recaptcha_only_if_image">Enter the words above:</span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
<div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
<div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>
<div><a href="javascript:Recaptcha.showhelp()">Help</a></div>
</div>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX" height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
<button type="submit" value="" id="" name="send" class="pull-right lightblue btn-primary">SUBMIT</button>
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("#contact").validate({
rules: {
"name_contact": {
required: true,
minlength: 3
},
"email_contact":{
required: true
},
"message":{
required:true
},
"recaptcha_response_field":{
required:true
}
},
messages: {
"name_contact": {
required: "Please, enter a name"
},
"email_contact":{
required: "Enter a valid email"
},
"message":{
required: "Please provide a comment"
},
"recaptcha_response_field":{
required: "Captcha is required"
}
},
errorPlacement: function(error, element) {
error.insertBefore(element);
}
});
});
</script>
答案 0 :(得分：6)
没有简单的解决方案只使用JavaScript或jQuery。由于您必须使用API与私有密钥比较Re-Captcha代码，为了获得适当的安全性，您必须使用某些服务器执行此过程
除Re-Captcha代码外，用户正确填写表格。 如果Re-Captcha代码为空，则jQuery Validate中的正常 输入的Re-Captcha代码（正确或错误），表单通过 您的服务器 - 代码，PHP，Perl等等，然后使用您的私有API密钥验证输入的Re-Captcha代码与API预期的Re-Captcha代码。 如果Re-Captcha代码正确无误，您的服务器 - 代码将继续正常运行，并向您的jQuery 如果Re-Captcha代码不正确，您的服务器 - 代码将仅 返回“错误”文字回复您的jQuery 在您的jQuery 如果返回的消息表明成功，那么您的表单已经成功提交，您可以重定向，清除表单，动画，打印消息，什么都不做等等。 如果返回的消息指示失败，请通过JavaScript生成新的Re-Captcha代码，显示错误消息，“输入错误的Captcha”，用户可以再试一次。< / p> 这就是我的做法......你需要做的事情非常像以下几样。 在 您还需要修改服务器端功能以测试验证码是通过还是失败，执行相应的功能，并返回正确的 （注意：任何纯JavaScript / jQuery解决方案，无需编辑服务器端代码，不安全.Captcha可以轻松绕过您的私有API钥匙暴露给公众。） 以下仅是我修改服务器端代码的PERL示例，该代码是Form Mailer脚本。您必须以类似的方式调整服务器端代码。 首次运行脚本时会调用子例程 请记住，此服务器端代码必须返回您的jQuery在jQuery
required规则会触发“缺失的Captcha”消息。用户可以再试一次。ajax回调函数中的jQuery submitHandler提交到服务器 - 代码ajax success返回“成功”文字回复回调函数。ajax success回调函数，服务器端代码将不执行任何其他操作。ajax success回调函数中，阅读从服务器端代码返回的消息文本。
submitHandler选项中添加.validate()，并使用ajax来控制表单提交。这是您与Captcha和控制表单提交进行交互的唯一方式。 ajax消息msg。如果不了解服务器端代码，就不可能说出更具体的内容。$(document).ready(function() {
$("#contact").validate({
// your other options and rules,
submitHandler: function (form) {
$.ajax({
type: 'POST',
data: $('form').serialize(),
url: 'formMail.pl', // <-- whatever your server-side script, mine is a perl form mailer
success: function (msg) {
if (msg.indexOf('captcha') != -1) {
Recaptcha.reload(); // reloads a new code
$('#recaptcha_response_field').before(msg); // error message
} else {
// anything else to do upon success, animations, etc.
// form was already submitted as per ajax
}
}
});
return false; // blocks normal form submit
}
});
});
check_captcha。sub check_captcha {
my $ua = LWP::UserAgent->new();
my $result=$ua->post(
'http://www.google.com/recaptcha/api/verify',
{
privatekey => 'xxxxxxxxxxxxx', # insert your private key here
remoteip => $ENV{'REMOTE_ADDR'},
challenge => $Form{'recaptcha_challenge_field'},
response => $Form{'recaptcha_response_field'}
}
);
if ( $result->is_success && $result->content =~ /^true/) {
return; # OK - continue as normal with Form Mailer
} else {
# error, Form Mailer will not continue
&error('captcha_failed'); # failed Captcha code, call error subroutine to print an error message (msg) containing the word "captcha"
}
}
ajax success回调中选择的消息，如上面的msg。在我的示例中，如果消息包含单词“captcha”，则表示代码输入错误，用户必须重新输入新的Captcha代码。