文本框中的事件應用：以輸入郵箱為例，如圖： 代碼如下： 複製代碼 代碼如下: jquery文字方塊中的事件應用 <BR>body{ font-size:13px;} <BR>/*元素初始化樣式*/ <BR>.divInit{ width:390px ; height:55px; line-height:55px; padding-left:20px;} <BR>.txtInit{ border:solid 1px #666; padding:3px; background-image:url('Images/bg_email_input.gif); } <BR>.spnInit{ width:179px; height:40px; line-height:40px; float:right; margin-top:8px; padding-left:10px; background-repeat:no-repeat;} <eat>/}; *元素遺失焦點樣式*/ <BR>.divBlur{ background-color:#FEEEC2;} <BR>.txtBlur{ border:solid 1px #666; padding:3px; background-image:url('Images/bg_egif_input2.egifmail_input2. ');} <BR>.spnBlur{ background-image:url('Images/bg_email_wrong.gif');} <BR>.divFocu{ background-color:#EDFFD5;} /*divdiv >.spnSucc{ background-image:url('Images/pic_Email_ok.gif'); margin-top:20px;} /*驗證成功時span樣式*/ <BR> <BR>$(function () { <BR>$("#txtEmail").trigger("focus"); //預設時文字框取得焦點<BR>$("#txtEmail").focus(function () { //文字方塊取得焦點事件<BR>$(this).removeClass("txtBlur").addClass("txtInit"); <BR>$("#email").removeClass("divBlur").addClass("divFocu"); <BR>$("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html( "請輸入您常用郵件地址！ "); <BR>}); <BR>$("#txtEmail").blur(function () { //文字方塊遺失焦點事件<BR>var vTxt = $("#txtEmail").val() ; <BR>if (vTxt.length == 0) { //文字方塊中是否輸入了郵件信箱<BR>$(this).removeClass("txtInit").addClass("txtBlur"); <BR>$( "# email").removeClass("divFocu").addClass("divBlur"); <BR>$("#spnTip").addClass("spnBlur").html("信箱位址不能為空白！"); <BR>} <BR>else { //偵測郵件格式是否正確<BR>if (!chkEmail(vTxt)) { //如果不正確<BR>$(this).removeClass("txtInit").addClass( "txtBlur"); <BR>$("#email").removeClass("divFocu").addClass("divBlur"); <BR>$("#spnTip").addClass("spnBlur").html( "信箱格式不正確！"); <BR>} <BR>else { //如果正確<BR>$(this).removeClass("txtBlur").addClass("txtInit"); <BR>$(" #email").removeClass("divFocu"); <BR>$("#spnTip").removeClass("spnBlur").addClass("spnSucc").html(""); <BR>} <BR>} <BR> } <BR>}); <BR>/*驗證郵箱格式是否正確參數strEmail，需要驗證的郵箱*/ <BR>function chkEmail(strEmail) { <BR>var vChk = /^w ([- .]w )*@w ([-.]w )*.w ([-.]w )*$/; <BR>if (!vChk.test(strEmail)) { <BR>return false; <BR>} <BR>else { <BR>return true; <BR>} <BR>} <BR>}); <BR> 郵箱:
