在使用jQuery绑定事件时，若某个事件不存在，则该事件后 绑定的事件均失效：

如图所示，若失去焦点事件checkEmail不存在， 会导致后面的事件checkMobile,和事件checkBirth均失效

完整代码如下：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

 <title>使用正则表达式验证注册页面</title>

     <link rel="stylesheet" href="css/register.css">

 </head>

 <body>

 <section id="register">

     <div><img src="data:images/logo.jpg" alt="logo" /><img src="data:images/banner.jpg" alt="banner" /></div>

     <h1 class="hr_1">新用户注册</h1>

     <form action="" method="post" name="myform">

         <dl>

             <dt>用户名：</dt>

             <dd><input id="user" type="text" /><div id="user_prompt">用户名由英文字母和数字组成的4-16位字符，以字母开头</div></dd>

         </dl>

         <dl>

             <dt>密码：</dt>

             <dd><input id="pwd" type="password"  /><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></dd>

         </dl>

         <dl>

             <dt>确认密码：</dt>

             <dd><input id="repwd" type="password"/><div id="repwd_prompt"></div></dd>

         </dl>

         <dl>

             <dt>电子邮箱：</dt>

             <dd><input id="email" type="text"/><div id="email_prompt"></div></dd>

         </dl>

         <dl>

             <dt>手机号码：</dt>

             <dd><input id="mobile" type="text" /><div id="mobile_prompt"></div></dd>

         </dl>

         <dl>

             <dt>生日：</dt>

             <dd><input id="birth" type="text"/><div id="birth_prompt"></div></dd>

         </dl>

         <dl>

             <dt>&nbsp;</dt>

             <dd><input name="" type="image" src="data:images/register.jpg" class="btn" /></dd>

         </dl>

   </form>

 </section>

 <script src="js/jquery-1.12.4.js"></script>

 <script>

     $(document).ready(function(){

         //绑定失去焦点事件

         $("#user").blur(checkUser);

         $("#pwd").blur(checkPWD);

         $("#repwd").blur(checkRPWD);

         //$("#email").blur(checkEmail);          尝试取消注释，  看看会发生什么    （取消注释该语句后，事件checkMobile和事件checkBirth将不会输出事件中定义的报错信息）

         $("#mobile").blur(checkMobile);

         $("#birth").blur(checkBirth);

     })

     function checkUser(){

         var reg= /^[a-zA-Z]([a-zA-Z0-9]{3,15})$/;

         if(reg.test($("#user").val()) == false){

             $("#user_prompt").html('请输入正确的用户名');

             $('#user').focus();

             return false;

         }

         $("#user_prompt").html('');

         return true;

     }

     function checkPWD(){

         var reg = /^[a-zA-Z0-9]{4,10}$/;

         if(reg.test($('#pwd').val())==false){

             $("#pwd_prompt").html('请输入正确的密码');

             $("#pwd").focus();

             return false;

         }

         $("#pwd_prompt").html("");

         return true;

     }

     function checkRPWD(){

         if($("#repwd").val() != $("#pwd").val()){

             $("#repwd_prompt").html("两次输入的密码不一致");

             $("#pwd").focus();

             return false;

         }

         $("#repwd_prompt").html('---');

         return true;

     }

     function checkMobile(){

         var reg = /^1\d{10}$/;

         if(reg.test($("#mobile").val()) == false){

             $("#mobile_prompt").html("请输入正确的手机号码");

             $("#mobile").focus();

             return false;

         }

          return true;

     }

     function checkBirth(){

         var reg = /^((19\d{2})|(200\d)|(201[0-6]))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;

         if(reg.test($("#birth").val()) == false){

             $("#birth_prompt").html("请输入正确的生日格式");

             $("#birth").focus();

             return false;

         }

         $("#birth_prompt").html("--");

         return true;

         var birth = $(this).val();

         var reg = /^((19\d{2})|(200\d)|(201[0-6]))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;

         if (reg.test(birth) == false) {

             $("#birth_prompt").html("生日格式不正确，例如1980-5-12或1988-05-04");

             return false;

         }

          return true;

     }

 </script>

 </body>

 </html>

如有大佬知道缘由，可在下方评论。

jQuery之绑定焦点事件（焦点事件失效）的更多相关文章

  1. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

  2. jquery绑定input的change事件

    ### jquery绑定input的change事件 背景:在做一个登录页时,如果用户未输入验证码则无法点击登录按钮,所以想到了用input的change事件,但是在写完后发现无法监听input值的改 ...

  3. js 各种事件 如：点击事件、失去焦点、键盘事件等

    事件驱动:        我们点击按钮 按钮去掉用相应的方法.                demo:             <input type="button" v ...

  4. JQuery中绑定事件（bind()）和移除事件（unbind()）

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 ...

  5. WPF双滑块控件以及强制捕获鼠标事件焦点

    效果 概述 最近有个小需求要用双滑块表示一个取值范围,于是就简单做了个用户控件,在此记录下. 使用矩形Rectangle表示范围,椭圆Ellipse表示滑块,使用Canvas控制滑块的左右移动. 椭圆 ...

  6. jquery on 绑定事件

    jquery on 绑定事件 1. 多个选择器绑定一个事件 2. 多个事件绑定一个函数 3. 一个选择器绑定多个事件,有两种写法: 或者 on只绑定一次事件,绑定父元素,防止初始化时数据未加载,绑定出 ...

  7. jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...

  8. jquery一次绑定多个元素事件

    jquery一次绑定多个元素事件 $(".peoplenum,input[name$='otherAmount'],#aa,#bb").bind("change" ...

  9. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

随机推荐

  1. python 数组array的一些操作

    对一些特定大小的元素进行操作 1.将数组Arr中大于100的值都设定为100 Arr[Arr >100] = 100    利用array索引的内置 numpy.minimum(Arr, 100 ...

  2. FLV格式解析（转）

    flv格式详解+实例剖析:https://www.cnblogs.com/lidabo/p/9018548.html FLV 封装格式解析:https://www.cnblogs.com/leisur ...

  3. 转载一篇棒棒的AWK教程

    处理文件经常要用到awk,老是找同事帮忙,次数多了难免被吐槽orz,其实之前也有找过awk的教程,表示一直看不太懂 最近翻到了这篇教程,表示笔者真的太棒了,反正我是看一遍就懂了哈哈 剩下的只是熟悉度的 ...

  4. MySQL数据库、数据表和字段字符集查询、修改和配置

    一.设置编码 LINUX  修改vi/etc/my.cnf WINDOWS my.ini 在[client]下添加    default-character-set=utf8 在[mysqld]下添加 ...

  5. 微信小程序 （全局配置和页面配置）

    全局配置 app.json 文件用来对微信小程序进行全局配置. 一.配置页面路径 二.window 配置全局默认的窗口 navigationBarTextStyle:导航栏的标题颜色 navigati ...

  6. stm32f103中freertos的tasks基本使用案例及备忘

    基本实例   freetos的在stm32中使用踩了一些坑,事情做完了,就 做个备忘,希望能给后面的人一些借鉴. 先给出一个实际的例子吧. 启动代码 void task_create(void) { ...

  7. 关于video++，jsrun，有道笔记等的感想

    这几天一直在思考切入点.想了很多,有关于给初创企业提供社交平台营销的,如公众号,小程序,支付宝的到位,附近等.这些初看起来可行,细想起来有一些根本不完备.如通过微小宝多平台客户端了解最热的内容,在内容 ...

  8. python的MySQLdb库基本使用介绍

    MySQLdb库 import MySQLdb 简介 提供mysql的基本操作(包括建表,读取表数据,插入数据到表) 数据库操作基本步骤 #!/usr/bin/python # -*- coding: ...

  9. 中国科技股赴美IPO的游戏结束了吗?

    编辑 | 于斌 出品 | 于见(mpyujian) 有关斗鱼直播的消息,一直层出不求.最近前几天又有捷报传出,斗鱼走出国门,在美国上市,开始了自己的新征程. 但据悉,斗鱼国际控股有限公司可能刚刚达到外 ...

  10. mysql 慢查询日志 (mysqldumpslow坑还没填)

    MySQL的慢查询日志是MySQL提供的一种日志记录,用来记录在MySQL中响应时间超过long_query_time值的SQL语句(秒为单位). 默认情况下MySql数据库没有开启慢查询日志, my ...