在使用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. 网页前端导出CSV，Excel格式文件

    通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用“\n”和“,”拼接成一个字符串,然后把字符串放到href中,这种方法只支持chrome,firefox等非ie浏览器 html页 ...

  2. zookeeper入门之介绍与安装

    一:zookeeper是什么 What is ZooKeeper? ZooKeeper is a centralized service for maintaining configuration i ...

  3. django初步了解（一）

    安装django pip3 install django==版本号 创建一个djangp项目 django-admin startproject 项目名 目录介绍: 运行django项目: pytho ...

  4. python console的命令执行

    命令 from app01 import models models.UserInfo.objects.all()查询出所有内容

  5. 1032 Sharing (25分)

    1032 Sharing (25分) 题目 思路 定义map存储所有的<地址1,地址2> 第一set存放单词1的所有地址(通过查找map) 通过单词二的首地址,结合map,然后在set中查 ...

  6. vue-cli的版本查看及vue2.x和vue3.0的区别

    链接:https://www.cnblogs.com/wyongz/p/11505048.html 链接2:https://blog.csdn.net/weixin_37745913/article/ ...

  7. 10.4.3反向迭代器Reverse_iterator笔记

    反向迭代器就是在容器中从尾元素向首元素反向移动的迭代器.对于反向携带器,递增(以及递减)操作的含义会颠倒过来.递增一个反向迭代器(++it)会移动到前一个元素:递减一个迭代器(--it)会移动到下一个 ...

  8. centos6 源码编译安装nginx 1.6 教程 nginx安装脚本

    操作系统centos 6.9 安装nginx需要pcre zlib openssl的库,下文都是在官网直接下载用作编译安装 该nginx安装教程,有安装maxmind IP 库 该教材有修改最大打开文 ...

  9. Go_sql注入

    我们任何时候都不应该自己拼接SQL语句! sqlInjectDemo("xxx' or 1=1#") sqlInjectDemo("xxx' union select * ...

  10. git merge 将多个commit合并为一条之--squash 选项

    转自: https://blog.csdn.net/themagickeyjianan/article/details/80333645 改进版本:合并多个提交为一条(git merge --squa ...