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 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
JavaScript实现世界各地时间显示
Sep 07 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
php 函数使用方法与函数定义方法
2010/05/09 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
用jscript启动sqlserver
2007/06/21 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python 获取项目根路径的代码
2019/09/27 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python requests上传文件实现步骤
2020/09/15 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
竞聘演讲稿范文
2014/01/12 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
2015年药店工作总结
2015/04/20 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
队列队形口号
2015/12/25 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android