我是jQuery的新手。
我有一个带有captcha验证的html联系表格。
该表单使用jQuery来验证名称、电子邮件地址和消息。
但我在整合captch验证时遇到了问题。
(由verifyimage.php
)使用以下代码生成captcha:
<?php
session_start();
error_reporting( 0 );
if( !function_exists( "imagecreatefrompng" ) )
{
exit( "You need to recompile with the GD library included in PHP for this feature to be able to function" );
}
$alphanum = "ABCDEFGHIJKLMNPQRSTUVWXYZ123456789";
$rand = substr( str_shuffle( $alphanum ), 0, 6 );
$image = imagecreatefrompng( "../images/verify.png" );
$textColor = imagecolorallocate( $image, 150, 150, 150 );
imagestring( $image, 5, 14, 22, $rand, $textColor );
$_SESSION['image_random_value'] = md5( $rand );
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header( "Last-Modified: ".gmdate( "D, d M Y H:i:s" )." GMT" );
header( "Cache-Control: no-store, no-cache, must-revalidate" );
header( "Cache-Control: post-check=0, pre-check=0", false );
header( "Pragma: no-cache" );
header( "Content-type: image/png" );
imagepng( $image );
imagedestroy( $image );
?>
表单的HTML如下:
<!-- Contact Form -->
<div id="contactForm">
<form action="/contact.php" method="post">
<div class="oneThird">
<div class="row">
<label for="contactName">Full Name</label>
<input id="contactName" name="contactName" type="text" />
</div>
<div class="row topMargin">
<label for="contactEmail">Email Address</label>
<input id="contactEmail" name="contactEmail" type="text" />
</div>
<div class="row topMargin">
<label for="contactVerify">Captcha</label>
<input style="background-image: url(/php/verifyimage.php);" id="contactVerify" name="contactVerify" type="text" />
</div>
</div>
<div class="twoThird lastColumn">
<div class="row">
<label for="contactMessage">Message</label>
<textarea id="contactMessage" name="contactMessage" cols="10" rows="9"></textarea>
</div>
</div>
<div class="clearfix">
</div>
<button type="submit" class="colorButton">Send Message</button>
</form>
</div>
jQuery包括以下与验证表单名称、电子邮件和消息部分相关的代码:
// Contact
if ($('#contactForm').length != 0)
{
var labelName = $('#contactForm label[for="contactName"]').text();
var labelEmail = $('#contactForm label[for="contactEmail"]').text();
var labelMessage = $('#contactForm label[for="contactMessage"]').text();
var emailPattern = new RegExp(/^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i);
if ($('#contactVerify').length != 0)
{
var labelVerify = $('#contactForm label[for="contactVerify"]').text();
}
$('#contactForm button').click(function()
{
if ($('#contactName').val() == '')
{
$('#contactForm label[for="contactName"]').addClass('error').text(labelName + ' is required');
}
else
{
$('#contactForm label[for="contactName"]').removeClass('error').text(labelName);
}
if ($('#contactEmail').val() == '')
{
$('#contactForm label[for="contactEmail"]').addClass('error').text(labelEmail + ' is required');
}
else if (!emailPattern.test($('#contactEmail').val()))
{
$('#contactForm label[for="contactEmail"]').addClass('error').text(labelEmail + ' is invalid');
}
else
{
$('#contactForm label[for="contactEmail"]').removeClass('error').text(labelEmail);
}
if ($('#contactMessage').val() == '')
{
$('#contactForm label[for="contactMessage"]').addClass('error').text(labelMessage + ' is required');
}
else
{
$('#contactForm label[for="contactMessage"]').removeClass('error').text(labelMessage);
}
if (typeof labelVerify != 'undefined')
{
if ($('#contactVerify').val() == '')
{
$('#contactForm label[for="contactVerify"]').addClass('error').text(labelVerify + ' is required');
}
else
{
$('#contactForm label[for="contactVerify"]').removeClass('error').text(labelVerify);
}
}
if ($('#contactForm label.error').length == 0)
{
$('#contactForm form').append('<input type="hidden" value="1" name="contactValid" />');
}
else
{
return false;
}
});
}
我一直纠结于如何实现captcha验证。我是否将其包含在表单投递到的contact.php
中?
或者我可以在表格张贴之前验证验证码吗?电子邮件地址是什么?
我试着添加:
<?php
session_start();
$cap = 'notEq';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (md5($_POST['contactVerify']) == $_SESSION['image_random_value']) {
// contactVerify verification is Correct. Do something here!
$cap = 'Eq';
} else {
// contactVerify verification is wrong. Take other action
$cap = '';
}
}
?>
到HTML表单的顶部。然后还添加:
var capch = '<?php echo $cap; ?>';
if(capch != 'notEq'){
if(capch == 'Eq'){
// My PHPMailer script //
}
else{
$('#contactForm label[for="contactVerify"]').addClass('error').text(labelVerify + ' is invalid');
}
}
});
作为脚本。但是没有任何快乐。无论验证码是否无效,表格都会被发送。
感谢您的帮助。
您需要将captcha保存到PHP中的$_SESSION中,并不管本地验证如何进行检查。
其次,人们很少使用本地captcha验证的原因是,这需要对服务器进行"检查",脚本会询问服务器是否正确,然后告诉用户是否正确(否则,网络浏览器会知道captcha的值,这将破坏目的,因为任何编码者都可能获取并利用它)。
我建议使用异步表单提交(在不刷新页面的情况下隐藏提交的表单,使用javascript提交表单,而不是将整个页面重新加载到/contact.php。接下来,让HTTP响应为"成功"或php返回失败原因。当客户端收到失败响应时,它将再次显示表单(请注意,由于没有刷新,数据仍将在字段中),请提供一个新的captcha,这样某人就不能经常轮询同一个captcha了,并向用户指示他们所做的操作失败了。
抛开手头的问题不谈,所有这些在Angular JS中都非常容易。我强烈推荐它。
希望这能有所帮助!