本文介绍了一种前端与后端交互验证验证码的方法。通过jQuery实现前端按钮点击时发送POST请求到后端checkcode.php，验证输入的验证码是否与服务器保存的匹配。若验证码正确，提交表单；否则，显示错误提示并刷新验证码。后端使用PHP，通过session检查验证码，返回验证结果。该机制确保了用户输入验证码的准确性。
1、前端代码 index.html
验证码提交自验证用户名
验证码
(function($){
$(document).ready(function(){
$(".submitBtn").click(function() {
var obj = $(this);
$.ajax({
url:'checkcode.php',
type:'POST',
data:{code:$.trim($("input[name=code]").val())},
dataType:'json',
async:false,
success:function(result) {
if(result.status == 1) {
obj.parents('form').submit(); //验证码正确提交表单
}else{
$(".code-img").click();
$(".yzmtips").html('验证码错误！');
setTimeout(function(){
$(".yzmtips").empty();
},3000);
}
},
error:function(msg){
$(".yzmtips").html('Error:'+msg.toSource());
}
})
return false;
})
});
})(jQuery);
2、后端验证码检测 checkcode.php
/**
* 用户验证码验证文件
* @Author:Zjmainstay
* @version : 1.0
* @creatdate: 2013-10-4
*/
session_start();
echo json_encode(array('status'=>(int)($_SESSION["CHECKCODE"] == $_POST['code'])));
exit;
未经同意禁止转载！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
