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 30 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
jquery实现动态画圆
Dec 04 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
基于canvasJS在PHP中制作动态图表
May 30 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
php实现文件下载更能介绍
2012/11/23 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
numpy数组广播的机制
2019/07/12 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
园艺专业毕业生求职信
2014/09/02 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript