在使用jQuery绑定事件时,若某个事件不存在,则该事件后 绑定的事件均失效:
如图所示,若失去焦点事件checkEmail不存在, 会导致后面的事件checkMobile,和事件checkBirth均失效
完整代码如下:
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>
如有大佬知道缘由,可在下方评论。