JQuery实现简单验证码提示解决方案


Posted in Javascript onDecember 20, 2012

先看效果图:
JQuery实现简单验证码提示解决方案 
要求:当输入框获得焦点时,自动显示验证图片。
代码如下(学习而已,仅供参考):

/***********************下是验证码对象*****************/ 
var Validation = {}; 
Validation.init = function(eleName,imageSrc){ 
this.image = imageSrc; 
$('#'+eleName).focusin(function(){ 
Validation.show(eleName); 
}); 
} 
Validation.image = ''; 
Validation.display=false; 
Validation.width = '100px'; 
Validation.height = '30px'; 
Validation.div = null; 
Validation.show = function(eleName){ 
if(this.display==false){ 
//首次显示 
if(this.div==null){ 
$('#'+eleName).after('<div style="display:none;" id="div_validation_'+eleName+'" title="点击更换"></div>'); 
this.div = $('#div_validation_'+eleName); 
this.div.css('position','absolute'); 
this.div.css('cursor','pointer'); 
this.div.css('border','1px solid #CCC'); 
this.div.css('background-color','#FFF'); 
this.div.css('background-position','center'); 
this.div.css('background-repeat','no-repeat'); 
this.div.css('height',this.height); 
this.div.css('width',this.width); 
var objOffset = $('#'+eleName).offset(); 
objOffset.top+=$('#'+eleName).height()+6; 
this.div.offset(objOffset); 
this.div.css('background-image','url('+Validation.image+'&_t='+new Date()+')'); 
this.div.css('display','inline-block'); 
this.display = true; 
//点击更换 
this.div.click(function(){ 
Validation.div.css('background-image','url('+Validation.image+'&_t='+new Date()+')'); 
}); 
} 
else{ 
this.div.css('background-image','url('+Validation.image+'&_t='+new Date()+')'); 
this.display = true; 
this.div.css('display','inline-block'); 
} 
} 
} 
Validation.hide =function(){ 
if(this.display==true){ 
this.display = false; 
this.div.hide(); 
} 
}

使用方式
//验证码对象初始化 
Validation.init('validation','Ajax.ashx?handle=validation'); 
// 输入框ID 验证图片地址 
//隐藏 
Validation.hide();
Javascript 相关文章推荐
js复制到剪切板的实例方法
Jun 28 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
JavaScript中return用法示例
Nov 29 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 #Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 #Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 #Javascript
img onload事件绑定各浏览器均可执行
Dec 19 #Javascript
JavaScript实现快速排序(自已编写)
Dec 19 #Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 #Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 #Javascript
You might like
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
php实现图片添加水印功能
2014/02/13 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
jquery $.getJSON()跨域请求
2011/12/21 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
Python调用C++程序的方法详解
2017/01/24 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
解决Python一行输出不显示的问题
2018/12/03 Python
python requests.post带head和body的实例
2019/01/02 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
简短证婚人证婚词
2014/01/09 职场文书
小学信息技术教学反思
2014/02/10 职场文书
信访维稳工作汇报
2014/10/27 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
调解协议书范本
2016/03/21 职场文书
python使用torch随机初始化参数
2022/03/22 Python