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

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

   

jquery失去焦点事件 jquery绑定失去焦点事件_html

 

   完整代码如下:

1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5 <title>使用正则表达式验证注册页面</title>
  6     <link rel="stylesheet" href="css/register.css">
  7 </head>
  8 
  9 <body>
 10 <section id="register">
 11     <div><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></div>
 12     <h1 class="hr_1">新用户注册</h1>
 13     <form action="" method="post" name="myform">
 14         <dl>
 15             <dt>用户名:</dt>
 16             <dd><input id="user" type="text" /><div id="user_prompt">用户名由英文字母和数字组成的4-16位字符,以字母开头</div></dd>
 17         </dl>
 18         <dl>
 19             <dt>密码:</dt>
 20             <dd><input id="pwd" type="password"  /><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></dd>
 21         </dl>
 22         <dl>
 23             <dt>确认密码:</dt>
 24             <dd><input id="repwd" type="password"/><div id="repwd_prompt"></div></dd>
 25         </dl>
 26         <dl>
 27             <dt>电子邮箱:</dt>
 28             <dd><input id="email" type="text"/><div id="email_prompt"></div></dd>
 29         </dl>
 30         <dl>
 31             <dt>手机号码:</dt>
 32             <dd><input id="mobile" type="text" /><div id="mobile_prompt"></div></dd>
 33         </dl>
 34         <dl>
 35             <dt>生日:</dt>
 36             <dd><input id="birth" type="text"/><div id="birth_prompt"></div></dd>
 37         </dl>
 38         <dl>
 39             <dt> </dt>
 40             <dd><input name="" type="image" src="images/register.jpg" class="btn" /></dd>
 41         </dl>
 42   </form>
 43 </section>
 44 
 45 <script src="js/jquery-1.12.4.js"></script>
 46 <script>
 47     $(document).ready(function(){
 48         //绑定失去焦点事件
 49         $("#user").blur(checkUser);
 50         $("#pwd").blur(checkPWD);
 51         $("#repwd").blur(checkRPWD);
 52         //$("#email").blur(checkEmail);          尝试取消注释,  看看会发生什么    (取消注释该语句后,事件checkMobile和事件checkBirth将不会输出事件中定义的报错信息)
 53         $("#mobile").blur(checkMobile);
 54         $("#birth").blur(checkBirth);
 55     })
 56     
 57     function checkUser(){
 58         var reg= /^[a-zA-Z]([a-zA-Z0-9]{3,15})$/;
 59         if(reg.test($("#user").val()) == false){
 60             $("#user_prompt").html('请输入正确的用户名');
 61             $('#user').focus();
 62             return false;
 63         }
 64         $("#user_prompt").html('');
 65         return true;
 66     }
 67     
 68     function checkPWD(){
 69         var reg = /^[a-zA-Z0-9]{4,10}$/;
 70         if(reg.test($('#pwd').val())==false){
 71             $("#pwd_prompt").html('请输入正确的密码');
 72             $("#pwd").focus();
 73             return false;
 74         }
 75         $("#pwd_prompt").html("");
 76         return true;        
 77     }
 78     
 79     function checkRPWD(){
 80         if($("#repwd").val() != $("#pwd").val()){
 81             $("#repwd_prompt").html("两次输入的密码不一致");
 82             $("#pwd").focus();
 83             return false;
 84         }    
 85         $("#repwd_prompt").html('---');
 86         return true;
 87     }
 88     
 89     function checkMobile(){
 90         var reg = /^1\d{10}$/;
 91         if(reg.test($("#mobile").val()) == false){
 92             $("#mobile_prompt").html("请输入正确的手机号码");
 93             $("#mobile").focus();
 94             return false;
 95         }
 96  97         return true;
 98     }
 99     
100     function checkBirth(){
101         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])$/;
102         if(reg.test($("#birth").val()) == false){
103             $("#birth_prompt").html("请输入正确的生日格式");
104             $("#birth").focus();
105             return false;
106         }
107         $("#birth_prompt").html("--");
108         return true;
109         var birth = $(this).val();
110         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])$/;
111         if (reg.test(birth) == false) {
112             $("#birth_prompt").html("生日格式不正确,例如1980-5-12或1988-05-04");
113             return false;
114         }
115 116         return true;
117     }
118     
119     
120 </script>
121 
122 </body>
123 </html>