jquery文本框中的事件应用以输入邮箱为例


Posted in Javascript onMay 06, 2014

文本框中的事件应用:以输入邮箱为例,如图:
jquery文本框中的事件应用以输入邮箱为例 
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jquery文本框中的事件应用</title> 
<style type="text/css"> 
body{ font-size:13px;} 
/*元素初始化样式*/ 
.divInit{ width:390px; height:55px; line-height:55px; padding-left:20px;} 
.txtInit{ border:solid 1px #666; padding:3px; background-image:url('Images/bg_email_input.gif');} 
.spnInit{ width:179px; height:40px; line-height:40px; float:right; margin-top:8px; padding-left:10px; background-repeat:no-repeat;} 
/*元素丢失焦点样式*/ 
.divBlur{ background-color:#FEEEC2;} 
.txtBlur{ border:solid 1px #666; padding:3px; background-image:url('Images/bg_email_input2.gif');} 
.spnBlur{ background-image:url('Images/bg_email_wrong.gif');} 
.divFocu{ background-color:#EDFFD5;} /*div获取焦点样式*/ 
.spnSucc{ background-image:url('Images/pic_Email_ok.gif'); margin-top:20px;} /*验证成功时span样式*/ 
</style> 
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$("#txtEmail").trigger("focus"); //默认时文本框获得焦点 
$("#txtEmail").focus(function () { //文本框获取焦点事件 
$(this).removeClass("txtBlur").addClass("txtInit"); 
$("#email").removeClass("divBlur").addClass("divFocu"); 
$("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html("请输入您常用邮箱地址!"); 
}); 
$("#txtEmail").blur(function () { //文本框丢失焦点事件 
var vTxt = $("#txtEmail").val(); 
if (vTxt.length == 0) { //文本框中是否输入了邮箱 
$(this).removeClass("txtInit").addClass("txtBlur"); 
$("# email").removeClass("divFocu").addClass("divBlur"); 
$("#spnTip").addClass("spnBlur").html("邮箱地址不能为空!"); 
} 
else { //检测邮箱格式是否正确 
if (!chkEmail(vTxt)) { //如果不正确 
$(this).removeClass("txtInit").addClass("txtBlur"); 
$("#email").removeClass("divFocu").addClass("divBlur"); 
$("#spnTip").addClass("spnBlur").html("邮箱格式不正确!"); 
} 
else { //如果正确 
$(this).removeClass("txtBlur").addClass("txtInit"); 
$("#email").removeClass("divFocu"); 
$("#spnTip").removeClass("spnBlur").addClass("spnSucc").html(""); 
} 
} 
}); 
/*验证邮箱格式是否正确 参数strEmail,需要验证的邮箱*/ 
function chkEmail(strEmail) { 
var vChk = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 
if (!vChk.test(strEmail)) { 
return false; 
} 
else { 
return true; 
} 
} 
}); 
</script> 
</head> 
<body> 
<form id="form1" action="#"> 
<div id="email" class="divInit">邮箱: 
<span id="spnTip" class="spnInit"></span> 
<input type="text" id="txtEmail" class="txtInit" /> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
js原型链原理看图说明
Jul 07 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
论JavaScript模块化编程
Mar 07 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
jquery删除数据记录时的弹出提示效果
May 06 #Javascript
js单词形式的运算符
May 06 #Javascript
js函数调用的方式
May 06 #Javascript
js使用ajax读博客rss示例
May 06 #Javascript
Android中的jQuery:AQuery简介
May 06 #Javascript
JavaScript获取table中某一列的值的方法
May 06 #Javascript
jQuery判断元素是否存在的可靠方法
May 06 #Javascript
You might like
农民C键的运用技巧
2020/03/04 星际争霸
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
python自带的http模块详解
2016/11/06 Python
Python做简单的字符串匹配详解
2017/03/21 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
python中四舍五入的正确打开方式
2021/01/18 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
医学生职业生涯规划书范文
2014/03/13 职场文书
艺术节主持词
2014/04/02 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS