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>
时间： 2024-10-07 05:31:36