jquery テキストボックスのイベントアプリケーションは、入力電子メールを example_jquery として受け取ります

テキスト ボックスのイベント アプリケーション: 図に示すように、入力メールを例にとります: コードは次のとおりです:

コードをコピーします コードは次のとおりです: jquery テキスト ボックスのイベント アプリケーション /*要素の初期化スタイル*/ .divInit{ width:390px; height:55px; line-height:55px; padding-left:20px;} .txtInit{ border:solid 1px #666;パディング:3px; 背景画像:url('Images/bg_email_input.gif');} .spnInit{ 幅:179px; ライン高さ:40px; padding-left:10px;background-repeat: no-repeat;} /*要素はフォーカス スタイルを失います*/ .divBlur{background-color:#FEEEC2;} .txtBlur{ border:solid 1px #666; パディング:3px; 背景画像:url('画像/bg_email_input2.gif');} .spnBlur{ 背景画像:url('画像/bg_email_wrong.gif');} {background-color:#EDFFD5;} / *div はフォーカス スタイルを取得します*/ .spnSucc{background-image:url('Images/pic_Email_ok.gif') /*span スタイル検証は成功しました*/ > (function () { $(" #txtEmail").trigger("focus"); //デフォルトでテキスト ボックスにフォーカスが設定されます $("#txtEmail").focus(function () { / /テキスト ボックスはフォーカス イベントを取得します $(this ).removeClass("txtBlur").addClass("txtInit"); $("#email").removeClass("divBlur").addClass(" divFocu"); $("#spnTip" ).removeClass("spnBlur").removeClass("spnSucc").html("通常のメール アドレスを入力してください。 "); }); $("#txtEmail").blur(function () { //テキスト ボックスがフォーカスを失う イベント var vTxt = $("#txtEmail").val() ; if (vTxt.length == 0) { //テキストボックスにメールアドレスが入力されているかどうか $(this).removeClass("txtInit").addClass("txtBlur"); >$( "# email").removeClass("divFocu").addClass("divBlur"); $("#spnTip").addClass("spnBlur").html("メール アドレスを空にすることはできません。 "); } else { //メールの形式が正しいか確認します if (!chkEmail(vTxt)) { //間違っている場合 $(this).removeClass(" txtInit").addClass( "txtBlur"); $("#email").removeClass("divFocu").addClass("divBlur"); $("#spnTip").addClass(" spnBlur").html( "電子メールの形式が間違っています!"); } else { //正しい場合 $(this).removeClass("txtBlur").addClass("txtInit") ; $(" #email").removeClass("divFocu"); $("#spnTip").removeClass("spnBlur").addClass("spnSucc").html(""); } } }); /*電子メールの形式が正しいかどうかを確認します。パラメーター strEmail、検証する必要がある電子メール*/ function chkEmail(strEmail) { var vChk = /^w ([- .]w )*@w ([-.]w )*.w ([-.]w )*$/; if (!vChk.test(strEmail) ) { return } else { return true; } }); /head> >

jquery テキスト ボックスのイベント アプリケーションは、入力電子メールを example_jquery として受け取ります

jquery テキストボックスのイベントアプリケーションは、入力電子メールを example_jquery として受け取ります