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{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{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>