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>文本框中的事件应用</title>
<script type="text/javascript"
src="Jscript/jquery-1.8.2.min.js">
</script>
<style type="text/css">
body{font-size:13px}
/* 元素初始状态样式 */
.divInit{width:390px;height:55px;line-height:55px;padding-left:20px}
.txtInit{border:#666 1px solid;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:#666 1px solid;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 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) {
if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.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 id="txtEmail" type="text" class="txtInit" />
</div>
</form>
</body>
</html>
jQuery-文本框事件应用-判断邮箱地址的更多相关文章
- jQuery文本框中的事件应用
jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- Jquery文本框值改变事件兼容性
Jquery文本框值改变事件(支持火狐.ie) Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: ? $(docum ...
- jQuery监控文本框事件并作相应处理的方法
本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document) .on('input propertychange', '#que ...
- 分享一个仅0.7KB的jQuery文本框输入提示插件
由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...
- 5313 [JL]判断邮箱地址 升级版
5313 [JL]判断邮箱地址 升级版 时间限制: 1 s 空间限制: 1000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 正确的邮箱地 ...
- PHP判断邮箱地址是否合法的正则表达式
PHP判断邮箱地址是否合法的正则表达式: function checkEmail($inAddress){ return (preg_match("/^([a-zA-Z0-9_-])+@([ ...
- jQuery文本框(input textare)事件绑定方法教程
jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...
- jquery 文本框回车与change事件
文本框的改变用change事件 要用bind,两个是有区别的,change只是在失去焦点的时候出发,很多时候不能满足需要. 代码如下 $('#flowfromid').bind("pr ...
- Jquery文本框值改变事件（支持火狐、ie）
Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: $(document).ready(function () { $(& ...
随机推荐
- 一个按成绩排序SQL的写法问题
测试数据: SQL> select * from sscore; NAME SCORE ---------- ----- aa 99 bb ...
- TCP协议和TCP/IP(簇)
TCP协议(传输层) 用于应用程序之间的通信. 连接的建立是经过三次握手,断开的时候四次挥手. TCP 包头很复杂,但是主要关注五个问题,顺序问题,丢包问题,连接维护,流量控制,拥塞控制 状态位例如: ...
- The Structure of the Java Virtual Machine Java虚拟机结构 虚拟机内存模型
小结: 1.实现一台Java虚拟机,只需正确读取class文件中的每一条字节码指令且能正确执行这些指令所蕴含的操作. 2.设计者决定:运行时数据区的内存如何布局,选择哪种垃圾收集算法,是否对虚拟机字节 ...
- 【实战解析】基于HBase的大数据存储在京东的应用场景
京东技术 https://mp.weixin.qq.com/s?src=11×tamp=1551342955&ver=1455&signature=0hYp8OsxY ...
- [yum] yum使用光盘安装或更新软件
https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/7/html/system_administrators_ ...
- [skill][makefile] makefile 常用内容记录
其实,makefile有点复杂. 文档看了又看,还是要经常翻,做个记录备忘 :) 1. 隐含命令 implicit rules 与 implicit rule 相对应的有 pattern rules ...
- [web][nginx] 初识nginx -- 使用nginx搭建https DPI解码测试环境
环境 CentOS 7 X86 文档: https://nginx.org/en/docs/ 安装: [root@dpdk ~]# cat /etc/yum.repos.d/nginx.repo [n ...
- jMeter_响应数据乱码
jMeter测试时服务响应数据乱码 方式一:修改配置文件参数 1.修改jMeter安装目录 jmeter.properties 中 sampleresult.default.encoding=UTF- ...
- git push error:error: insufficient permission for adding an object to repository database ./object解决
在服务器代码库xxx.git文件夹中:1.sudo chmod -R g+ws *2.sudo chgrp -R mygroup * //mygroup是该文件夹的所有组3.git repo-conf ...
- 微信公开课厦门站 时尚行业专场PPT
做为一位开发者,ytkah有幸参加了微信公开课厦门站-时尚行业专场,见证了微信支付的发展历程,小程序产品的实力简介,感受了一下与各位高手共聚一堂的氛围,当然还近距离接触了著名主持人兼NPC潮品(与潘玮 ...