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 事件对象的实现
Jul 13 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
node.js操作mysql简单实例
May 25 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 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
如何给phpadmin一个保护
2006/10/09 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
python中实现定制类的特殊方法总结
2014/09/28 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python中常用信号signal类型实例
2018/01/25 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
python之生成多层json结构的实现
2020/02/27 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
介绍一下代理模式(Proxy)
2014/10/17 面试题
什么是GWT的Module
2013/01/20 面试题
成功的酒店创业计划书
2013/12/27 职场文书
大学生军训感想
2014/02/16 职场文书
公司离职证明样本
2014/09/13 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
Golang中异常处理机制详解
2021/06/08 Golang