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 获取链接(url)参数的方法
Feb 15 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
使用JS实现动态时钟
Mar 12 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实现的XML操作类【XML Library】
2016/12/29 PHP
向左滚动文字 js代码效果
2013/08/17 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
详解Python函数式编程—高阶函数
2019/03/29 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
Java面向对象面试题
2016/12/26 面试题
搞笑征婚广告词
2014/03/17 职场文书
语文教育专业求职信
2014/06/28 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
校园运动会广播稿
2014/10/06 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers