极速小乌龟

导航

jQuery-文本框事件应用-判断邮箱地址 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>文本框中的事件应用</title>
 5     <script type="text/javascript" 
 6             src="Jscript/jquery-1.8.2.min.js">
 7     </script>
 8     <style type="text/css">
 9             body{font-size:13px} 
10             /* 元素初始状态样式 */
11             .divInit{width:390px;height:55px;line-height:55px;padding-left:20px}
12             .txtInit{border:#666 1px solid;padding:3px;background-image:url('Images/bg_email_input.gif')}
13             .spnInit{width:179px;height:40px;line-height:40px;float:right;margin-top:8px;padding-left:10px;background-repeat:no-repeat}
14             
15             /* 元素丢失焦点样式 */
16             .divBlur{background-color:#FEEEC2}
17             .txtBlur{border:#666 1px solid;padding:3px;background-image:url('Images/bg_email_input2.gif')}
18             .spnBlur{background-image:url('Images/bg_email_wrong.gif')}
19 
20             .divFocu{background-color:#EDFFD5}/* div获取焦点样式 */
21             .spnSucc{background-image:url('Images/pic_Email_ok.gif');margin-top:20px}/* 验证成功时span样式 */
22     </style>
23     <script type="text/javascript">
24         $(function() {
25             $("#txtEmail").trigger("focus");//默认时文本框获取焦点
26 
27             $("#txtEmail").focus(function() {//文本框获取焦点事件
28                 $(this).removeClass("txtBlur").addClass("txtInit");
29                 $("#email").removeClass("divBlur").addClass("divFocu");
30                 $("#spnTip").removeClass("spnBlur")
31                 .removeClass("spnSucc").html("请输入您常用邮箱地址！");
32             })
33 
34             $("#txtEmail").blur(function() {//文本框丢失焦点事件
35                 var vtxt = $("#txtEmail").val();
36                 if (vtxt.length == 0) {
37                     $(this).removeClass("txtInit").addClass("txtBlur");
38                     $("#email").removeClass("divFocu").addClass("divBlur");
39                     $("#spnTip").addClass("spnBlur").html("邮箱地址不能为空！");
40                 }
41                 else {
42                     if (!chkEmail(vtxt)) {//检测邮箱格式是否正确
43                         $(this).removeClass("txtInit").addClass("txtBlur");
44                         $("#email").removeClass("divFocu").addClass("divBlur");
45                         $("#spnTip").addClass("spnBlur").html("邮箱格式不正确！");
46                     } 
47                     else {//如果正确
48                         $(this).removeClass("txtBlur").addClass("txtInit");
49                         $("#email").removeClass("divFocu");
50                         $("#spnTip").removeClass("spnBlur").addClass("spnSucc").html("");
51                     }
52                 }
53             })
54             /*
55              *验证邮箱格式是否正确
56              *参数strEmail，需要验证的邮箱
57             */
58             function chkEmail(strEmail) {
59                 if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)) {
60                     return false;
61                 }
62                 else {
63                     return true;
64                 }
65             }
66         })
67     </script>
68 </head>
69 <body>
70    <form id="form1" action="#">
71       <div id="email" class="divInit">邮箱：
72            <span id="spnTip" class="spnInit"></span>
73            <input id="txtEmail" type="text" class="txtInit" />
74       </div>
75    </form>
76 </body>
77 </html>

 

posted on 2017-03-21 22:33  极速小乌龟  阅读(163)  评论(0)    收藏  举报