怎么用jQuery+Ajax实现判断输入验证码是否正确

怎么用jQuery+Ajax实现判断输入验证码是否正确

这篇“怎么用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:$('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  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实现判断输入验证码是否正确”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注高防服务器网行业资讯频道。

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[