<!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-文本框事件应用-判断邮箱地址的更多相关文章

  1. jQuery文本框中的事件应用

    jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  2. Jquery文本框值改变事件兼容性

    Jquery文本框值改变事件(支持火狐.ie)   Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: ? $(docum ...

  3. jQuery监控文本框事件并作相应处理的方法

    本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document)  .on('input propertychange', '#que ...

  4. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

  5. 5313 [JL]判断邮箱地址 升级版

    5313 [JL]判断邮箱地址 升级版  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 正确的邮箱地 ...

  6. PHP判断邮箱地址是否合法的正则表达式

    PHP判断邮箱地址是否合法的正则表达式: function checkEmail($inAddress){ return (preg_match("/^([a-zA-Z0-9_-])+@([ ...

  7. jQuery文本框(input textare)事件绑定方法教程

    jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...

  8. jquery 文本框回车与change事件

    文本框的改变用change事件 要用bind,两个是有区别的,change只是在失去焦点的时候出发,很多时候不能满足需要.  代码如下   $('#flowfromid').bind("pr ...

  9. Jquery文本框值改变事件（支持火狐、ie）

    Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: $(document).ready(function () { $(& ...

随机推荐

  1. 优化网站设计（九）：减少DNS查找的次数

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

  2. 洛谷P3237 米特运输 [HNOI2014] hash/二进制分解

    正解:hash/二进制分解 解题报告: 传送门! umm首先提取下题意趴QAQ 大概是说给一棵树,每个点有一个权值,要求修改一些点的权值,使得同一个父亲的儿子权值相同,且父亲的权值必须是所有儿子权值之 ...

  3. debian下配置nginx缓存

    root权限下 新建/usr/nginx/cache/webpages目录 在/etc/nginx/sites-available下找到自己所需配置的文件,打开文件后在开头加上proxy_cache_ ...

  4. 怎么使用JavaScript进行进制转换

    JS 是一个很神奇的语言,内制的的很多函数可以帮我们进行数(进)制转换: JS中可以直接使用16进制: var a = 0xff; //255 将任意进制字符串转换为十进制,如二进制,八进制,十六进制 ...

  5. MySQL innodb_flush_method 【转载】

    innodb_flush_method这个参数控制着innodb数据文件及redo log的打开.刷写模式,对于这个参数,文档上是这样描述的: 有三个值:fdatasync(默认),O_DSYNC,O ...

  6. 【生产问题】记还原一个很小的BAK文件，但却花了很长时间，分析过程

    [生产问题]还原一个很小的BAK文件,但却花了很长时间? 关键词:备份时事务日志太大会发生什么?还原时,事务日志太大会怎么办? 1.前提: [1.1]原库数据已经丢失,只有这个bak了 [1.2]ba ...

  7. hibernate 主键生成方式

    1)assigned主键由外部程序负责生成,无需Hibernate参与. 2)hilo通过hi/lo 算法实现的主键生成机制,需要额外的数据库表保存主键生成历史状态. 3)seqhilo与hilo 类 ...

  8. 20171228 C#值类型和引用类型

    public class RefPoint //定义的引用类型 { public int x; public RefPoint(int x) { this.x = x; } } public stru ...

  9. Python3学习之路~8.1 socket概念及参数介绍

    一 socket介绍 TCP/IP 基于TCP/IP协议栈的网络编程是最基本的网络编程方式,主要是使用各种编程语言,利用操作系统提供的套接字网络编程接口,直接开发各种网络应用程序. socket概念 ...

  10. oracle sql 游标的简单用法（tip:sql中两个单引号表示一个单引号）

    --游标遍历某个字段 (打印出来) declare            res_sql varchar2(2000); cursor cur is            select f_dcnam ...