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 巧妙去除数组中的重复项
Jan 25 Javascript
jquery构造器的实现代码小结
May 16 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 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的操作详解
2013/06/07 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
个人收入证明范本
2014/01/12 职场文书
中英文求职信范文
2014/01/27 职场文书
经济管理自荐书
2014/06/09 职场文书
统计学教授推荐信
2014/09/18 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
酒桌上的开场白
2015/06/01 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python