jQuery之绑定焦点事件（焦点事件失效）

在使用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之绑定焦点事件（焦点事件失效）

最新文章

热门文章
