本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码。
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
代码
- <?php
- /**
- * 用户验证码验证文件
- * @Author:Zjmainstay
- * @version : 1.0
- * @creatdate: 2013-10-4
- */
- session_start();
- echo json_encode(array('status'=>(int)($_SESSION["CHECKCODE"] == $_POST['code'])));
- exit;
源码下载地址:Ajax实现提交表单时验证码自动验证
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。