jquery 失去焦点事件 jquery 绑定失去焦点事件
最编程
2024-06-17 20:07:38
...
在使用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>
推荐阅读
-
搞定!jQuery在JavaScript中绑定事件的多种方法总结
-
jquery 绑定事件 - 模糊失去焦点 - 聚焦获得焦点
-
jquery_easyui 中的焦点丢失事件未触发
-
[Flutter] 输入框获得焦点和失去焦点事件
-
什么是 vuejs 中的失去焦点事件?
-
输入标签事件汇总(vue、H5),获取焦点到失去焦点实时监听事件 - a. 在 Html 中写入输入标签相关事件:
-
js, jquery 听输入框输入获取, 失去焦点事件焦点, 模糊
-
Vue 输入在 @blur 事件中失去焦点,并实时获得焦点 刷新实时输入值
-
elementui+vue 输入框输入事件与失去焦点事件重叠
-
vue3+antdesign 输入框(输入)添加失去焦点触发事件