This article uses the source code to show how to implement the verification code before submitting the form. If it is not correct, the form will not be submitted and the verification code will be updated.
1. Front-end code index.html
<!DOCTYPE html>
<html>
<head>
<title>验证码提交自验证</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
</head>
<body>
<form action="doPost.php" method="POST">
<div class="row">
<label for="username">用户名</label>
<input type="text" name="username" id="username" />
</div>
<div class="row">
<label for="mod-captcha-code">验证码</label>
<input name="code" id="mod-captcha-code" size="6" class="zjcaptcha" style="width:80px" type="text"/>
<img class="code-img" style="height:30px;width:80px;" src="createcode.php?t=0" onclick="this.src=this.src.substring(0,this.src.indexOf('?')+1)+Math.random();return false;" />
<script type="text/javascript" src="http://www.zjmainstay.cn/jquery/jquery-1.8.2.min.js"></script>
<div class="yzmtips" style="color:red"></div>
</div>
<div class="row"> <input type="submit" value="提交" class="submitBtn"/>
</div>
</form>
<script>
(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);</script>
</body>
</html>2. Back-end verification code detection checkcode.php
<?php/*** 用户验证码验证文件* @Author:Zjmainstay* @version : 1.0* @creatdate: 2013-10-4*/session_start();echo json_encode(array('status'=>(int)($_SESSION["CHECKCODE"] == $_POST['code'])));exit;Demo address: Ajax implementation of automatic verification of verification code when submitting a form
Source code download address: Ajax realizes automatic verification of verification code when submitting a form
Please attach the original address of this article for reprinting: Ajax realizes automatic verification of verification code when submitting a form , first published from Zjmainstay study notes
This article uses the source code to show how to implement the verification code before submitting the form. If it is not correct, the form will not be submitted and the verification code will be updated.
1. Front-end code index.html
<!DOCTYPE html>
<html>
<head>
<title>验证码提交自验证</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
</head>
<body>
<form action="doPost.php" method="POST">
<div class="row">
<label for="username">用户名</label>
<input type="text" name="username" id="username" />
</div>
<div class="row">
<label for="mod-captcha-code">验证码</label>
<input name="code" id="mod-captcha-code" size="6" class="zjcaptcha" style="width:80px" type="text"/>
<img class="code-img" style="height:30px;width:80px;" src="createcode.php?t=0" onclick="this.src=this.src.substring(0,this.src.indexOf('?')+1)+Math.random();return false;" />
<script type="text/javascript" src="http://www.zjmainstay.cn/jquery/jquery-1.8.2.min.js"></script>
<div class="yzmtips" style="color:red"></div>
</div>
<div class="row"> <input type="submit" value="提交" class="submitBtn"/>
</div>
</form>
<script>
(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);</script>
</body>
</html>2. Back-end verification code detection checkcode.php
<?php/*** 用户验证码验证文件* @Author:Zjmainstay* @version : 1.0* @creatdate: 2013-10-4*/session_start();echo json_encode(array('status'=>(int)($_SESSION["CHECKCODE"] == $_POST['code'])));exit;Demo address: Ajax implementation of automatic verification of verification code when submitting a form
Source code download address: Ajax realizes automatic verification of verification code when submitting a form
Please attach the original address of this article for reprinting: Ajax realizes automatic verification of verification code when submitting a form , first published from Zjmainstay study notes