Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码。
1、前端代码 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、后端验证码检测 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;
演示地址:Ajax实现提交表单时验证码自动验证演示
源码下载地址:Ajax实现提交表单时验证码自动验证
转载请附带本文原文地址:Ajax实现提交表单时验证码自动验证,首发自 Zjmainstay学习笔记
Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)的更多相关文章
- Ajax提交表单时验证码自动验证 php后端验证码检测
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...
- ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码
首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...
- KindEditor:Ajax提交表单时获取不到HTML内容
当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了 原因:当ajax提交时,KindEdito的HTML数据还没有同步到表单中来,那怎么去获取HTML数据呢? ----- ...
- Dwz/Jquery--使用Ajax提交表单时调用表单设置的校验
案例 今天有一个需求就是点击按钮时,使用ajax方式提交表单,而且不是直接用form表单下的submit按钮提交,表单中用的校验是dwz 自带的校验方式,表单模板如下: <li><d ...
- JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
- POST方式提交表单时,后台接受实体如果继承了父类,将无法映射表单对应数据
引言 刚才在做一个post提交表单时,我在表单里放了几个隐藏域用来存放数据,表单name属性和后台实体属性签名保持一致.只是后台Action参数包含继承关系,所以无法获取到表单对应的值.刚开始一直纳闷 ...
- php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
if(isset($_POST['submit'])) 它的意思是不是判断是否配置了$_POST['submit'] 这个变量呢?如果有这个变量 在执行其它代码 应该这样用if(isset($_POS ...
- submit()提交表单时,显示警示框
我同事在实现submit()提交表单时,想要页面弹出警示框. 但是折腾了几小时后发现,submit()始终不执行. 她的代码如下: $(document).ready(function(){ $(&q ...
- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
$(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...
随机推荐
- Xaml/Xml 实现对象与存储分离
刚开始用xml存储东西的时候都是不断的在xml文件里面添加或者修改xml的节点,这个是很常见的做法,这方面的博客也很多我也就不介绍了.但其实在小批量存储的时候我们可以直接将对象存进xml/xaml,使 ...
- 收缩SQL Server日志不是那么简单的(翻译)
原文地址:http://rusanu.com/2012/07/27/how-to-shrink-the-sql-server-log/ 说明:本文为了更好的说明收缩的过程,在原文翻译的基础上增加了一些 ...
- fckeditor使用(转)
fckeditor - (1)资料介绍与安装 fckeditor介绍 FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器. 1.fckeditor官网:http://ww ...
- C语言实现单链表-01版
单链表的应用非常广,它可以实现栈,队列等: Problem 我对学习任何东西都希望能找到尽可能简单的例子,而不是看起来好高大上的: 对链表这样简答的数据结构,有些书也是写得太过“完美”啦: 初学者很难 ...
- paip.mysql 批量kill 连接.
paip.mysql 批量kill 连接. 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net ...
- atitit.提升软件开发效率大的总结O5
atitit.提升软件开发效率大的总结O5 #---平台化.组件化 1 #--cbb公用模块的建设 1 #---内部最佳流程方法跟实践的总结 2 #---内部知识体系的建设 2 #---问题Qa库的建 ...
- PowerDesigner建表
SQL: --建表 --管理人员表 admin --drop table WPADMIN cascade constraints; /*================================ ...
- RTL8710 ROM 符号表 函数,常量,变量
函数 Name Address Ordinal ---- ------- ------- __vectors_table Reset_Handler NMI_Handler HardFault_Han ...
- 架设证书服务器 及 让IIS启用HTTPS服务(转)
无废话图文教程,教你一步一步搭建CA服务器,以及让IIS启用HTTPS服务. 一.架设证书服务器(CA服务) 1.在系统控制面板中,找到“添加/删除程序”,点击左侧的“添加/删除windows组件”, ...
- Revit中如何添加水平仰视平面视图
在Revit平面视图中视角是俯视视角,但是在一些特殊的情况下,我们可能需要创建仰视视角的平面视图,例如我们需要向上看天花板的灯具布置的时候,下面举例说明添加仰视平面视图的方法. 如图在模型中有一楼板跟 ...