jquery ajax显示对号和错号,用于验证输入验证码是否正确
2015-06-22 21:47
746 查看
<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>
[/code]首先引入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;
}
[/code]验证码的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>
[/code]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";
}
}
[/code]注意图片一定要引入
来自为知笔记(Wiz)
相关文章推荐
- jquery源码分析之Callbacks
- Xpages引用jquery的两种方法
- jquery使用each时注意不要把注释写在函数体内
- jQuery里面的$(window).height()和$(document).height()的区别
- jQueryCDN
- Jquery1.6版本后attr的变化,灰常委屈
- jquery easyui常见问题:
- jquery多选下拉框左右复制
- jquery-ajax
- 跨域之-jquery操作
- jquery根据name属性查找元素
- 最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回
- 使用jquery+ajax+php实现搜索框的功能
- JQuery处理checkbox的checked属性正确用法
- jquery 使用$.ajax post方法提交数据
- 使用jQeury控制form动态发送请求
- 浅谈jquery中delegate()与live()
- jQuery初学者必看
- jquery 中ajax执行的优先级
- jquery中ready()函数执行的时机和window的load事件比较