jQuery Ajax显示对号和错号用于验证输入验证码是否正确

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<script src="js/j.js"></script>
<script>
$(document).ready(function(e) {
 $('#yes').hide();
 $('#no').hide();
  $('input[name=gcode]').keyup(function(){
   if($(this).val().length==4){
  $.post('gbook.php',{cc:$('input[name=gcode]').val()},function(msg){

   if(msg=='yes'){
    $('#no').hide();
    $('#yes').show();
   }else{
    $('#yes').hide();
    $("#no").show();
   }
  });
  }
 });
});
</script>

首先引入jquery

.sl-error-verifycode {
 background-image: url("images/icons.png");
 background-position: -26px 0;
 background-repeat: no-repeat;
 display: block;
 font-size: 18px;
 height: 23px;
 line-height: 20px;
 margin-left: 180px;
 margin-top: -25px;
 position: relative;
 text-align: center;
 width: 20px;
 z-index: 2;
}
.sl-correct-verifycode {
 background-image: url("images/icons.png");
 background-position: -50px 0;
 background-repeat: no-repeat;
 display: block;
 font-size: 18px;
 height: 23px;
 line-height: 20px;
 margin-left: 180px;
 margin-top: -25px;
 position: relative;
 text-align: center;
 width: 20px;
 z-index: 2;
}

验证码的html 代码

<tr>
  <td height="40" align="right">验证码：</td>
  <td height="40"><span class="addred">*</span></td>
  <td height="40">
  <input type="text" name="gcode" id="textfield7" class="txtlist">
<span id="yes" class="sl-correct-verifycode"></span><span id="no" class="sl-error-verifycode"></span>
  <img style="float:right; margin-top:-25px; margin-right:300px;" align="middle" src="inc/cc.php" onClick="this.src='inc/cc.php?'+new Date" title="点击换一张图片" width="100px"></td>
 </tr>

gbook.php

<?php
session_start();
if(isset($_POST['cc'])){
 $cc = strtolower($_POST['cc']);
 $ss = strtolower($_SESSION['code']);
 if($cc==$ss){
   echo "yes";
 }else{
   echo "no";
 }
}

注意图片一定要引入

以上所述是小编给大家介绍的jQuery Ajax显示对号和错号用于验证输入验证码是否正确，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 基于Ajax用户名验证、服务条款加载、验证码生成的实现方法

    基于Ajax用户名验证、服务条款加载、验证码生成的实现方法

     Ajax(asynchronous javascript and xml)异步的javascript和xml. 是为了解决传统的web应用中"发送请求-等待响应"这种模式的弊端,(浏览器在发送完请求后,只能等待服务器的响应,用户不能做其他的操作,浏览器发送完请求,会抛弃整个页面,等待服务器返回新的页面,也就是说,浏览器和服务器之间交互的数据量很大,不能做到按需获取数据)而创建的技术,该技术的本质是:通过一个浏览器内置的一个对象(XmlHttpRequest)异步地向服务器发送请求.

  • PHP生成各种常见验证码和Ajax验证过程

    PHP生成各种常见验证码和Ajax验证过程

    验证码在WEB应用中非常重要,通常用来防止用户恶意提交表单,如恶意注册和登录.论坛恶意灌水等.本文将通过实例讲解使用PHP生成各种常见的验证码包括数字验证码.数字+字母验证码.中文验证码.算术验证码等等以及其Ajax验证过程. PHP生成验证码图片 PHP生成验证码的原理:使用PHP的GD库,生成一张带验证码的图片,并将验证码保存在Session中. PHP生成验证码的大致流程有: 1.产生一张png的图片: 2.为图片设置背景色: 3.设置字体颜色和样式: 4.产生4位数的随机的验证码: 5.

  • jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)

    本文实例讲述了jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验).分享给大家供大家参考,具体如下: 前台显示页面: welcome.jsp <%@ page language="java" contentType="text/html; utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transiti

  • thinkphp验证码的实现(form、ajax实现验证)

    两种验证码验证实现,一种直接在form表单提交按钮实现验证,一种使用ajax传递参数实现验证: 1.直接在form表单提交按钮实现验证,在控制器VerifyController.class.php中写入如下代码: namespace Home\Controller; use Think\Controller; class VerifyController extends Controller { public function index() { $this->display(); } publ

  • asp.net ajax实现无刷新验证码

    1.首先是在后台验证码的aspx文件的Page_Load中的事件代码: 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Drawing; namespace 学生在线考试系统 { public partial class

  • Ajax和PHP正则表达式验证表单及验证码

    模式匹配符: \:转义字符 例如:\b转义了b ^:正则表达式开始符号 $:正则表达式结束符号 *:匹配前面的字符出现0次或者n次 +:匹配前面的字符出现1次或者n次 ?:匹配前面的字符出现0次或者1次 .:匹配除了换行符以外的所有单个字符 |:或者的意思,例如x|y 匹配x或者y {n}:匹配前面的n个字符 {n,m}:匹配至少n个最多m个前面字符 [xyz]:匹配中括号里的任意一个字符 [^xyz]:匹配除了中括号里的任意一个字符等价于[0-9] \w:匹配任意一个数字或字母或下划线 等价于

  • jQuery Ajax显示对号和错号用于验证输入验证码是否正确

    jQuery Ajax显示对号和错号用于验证输入验证码是否正确

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script src="js/j.js"></script> <script> $(document).ready(function(e) { $('#yes').hide(); $('#no').hide(); $('input[name=gcode]').keyup(function(){ if($(this).val().length==4){ $.post('gbook.php',{cc

  • 使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    先给大家展示下运行效果图:  1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+to

  • jQuery在ul中显示某个li索引号的方法

    本文实例讲述了jQuery在ul中显示某个li索引号的方法.分享给大家供大家参考.具体分析如下: 这段代码不仅适用于ul和li的元素索引号查找,也适用于其它带有包含关系的元素索引号查找,方法非常的巧妙 $("ul > li").click(function () { // http://www.jb51.net var index = $(this).prevAll().length; //prevAll([expr]): 查找当前元素之前所有的同辈元素 }); 希望本文所述对大

  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery

  • jQuery Ajax 实现在html页面实时显示用户登录状态

    当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定ID 如: <div id="ajaxlogin"></div> 二.新建一个动态的ajaxlogin.php文件,用来判断用户是否登录了 代码如下: <? session_start(); if( $_SESSION['u_login']=='turelogi

  • jQuery Ajax 加载数据时异步显示加载动画

    jQuery Ajax 加载数据时异步显示加载动画

    ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 <div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;"> <img alt="加载中..." src="../../Images/loading1.gif"/> </div> 在js脚本文件中首先把这个图片动画

  • jQuery Ajax 异步加载显示等待效果代码分享

    jQuery Ajax 异步加载显示等待效果代码分享

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

  • jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】

    本文实例讲述了jquery+ajax实现上传图片并显示上传进度功能.分享给大家供大家参考,具体如下: jquery上传文件用的formdata,上传进度条需要添加xhr的onprogress html代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib

  • Jquery Ajax请求方法小结(值得收藏)

    Jquery Ajax请求方法小结(值得收藏)

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :

  • jquery ajax 如何向jsp提交表单数据

    jquery ajax 如何向jsp提交表单数据

    AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰.我也是一个WEB程序开发者,当然我也要 "随波逐流"一把,不然饭碗不保啊! 之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后

随机推荐