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对象内部访问this修饰的成员函数示例
Apr 27 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
JavaScript实现简单动态进度条效果
Apr 06 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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
PHP+DBM的同学录程序(4)
2006/10/09 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
JS控制表格隔行变色
2006/06/26 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
js实现简单掷骰子效果
2019/10/24 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
领导的自我鉴定
2013/12/28 职场文书
办理居住证介绍信
2014/01/15 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
住房抵押登记委托书
2014/09/27 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
团结主题班会
2015/08/13 职场文书
欧元符号 €
2022/02/17 杂记