0

メールアドレスが有効でない場合、「有効なメールアドレスを入力してください」というメッセージを画面に表示したい。body 要素の innerHTML ステートメントは正常に機能していますが、p 要素に使用しているステートメントは機能しません。

テスト中に、「有効な電子メール アドレスを入力してください」というメッセージが表示され、「無効」アラート ボックスの [OK] ボタンをクリックすると、メッセージが消えました。

JavaScript:

<script type="text/javascript">      
function validateEmail() {
    var emailRule =  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;   
    if (emailRule.test(document.forms[0].email.value)) {
       document.getElementById("body").innerHTML = "Thank you for signing up for our newsletter! You will recieve a confirmation email shortly.";
       setTimeout("window.close()", 3000);
    }
    else
       window.alert("not valid");       //for debugging
       document.getElementById("message").innerHTML = "Please enter a valid email address";
}  
</script>

HTML:

</head>
<body id="body">
<p>If you sign up for our newsletter you will be entered into a drawing to win free clothes every month!</p>
<br>
<p id="message"> </p>
<form action="" onsubmit="validateEmail();">
<p>Email: <input type="text" name="email"/>
<input type="submit" value="Sign up"/></p>
<br>
<input type="button" value="No thanks" onclick="window.close()"/>
<br>
</form>
<p><a href="privacy.html">Privacy Policy</a></p>
</body>
</html>
4

4 に答える 4

2

デフォルトのアクションを妨げないため、フォームは何の理由もなく送信されます。そのため、メッセージが表示され (動作中)、消えます (ページの再読み込み)。

function validateEmail(e) {
    if( valid ) { /* stuff */ }
    else {
      e.preventDefault(); // Prevent form submission
    /* etc */
于 2013-04-25T15:08:16.020 に答える
1

ここで jsFiddle を使用します。

最初に、console.log を保持する場合は、else ステートメントに中かっこを追加します。これがなくても機能しますが、影響を受けるのは 1 行後のみですが、2 行後にあるため、innerHTML は関係なく変更されます。 if/else。

また、JavaScript のevent.preventDefault()を追加して、else ステートメントが発生した場合にフォームの送信を停止します。

else {
   event.preventDefault();
   document.getElementById("message").innerHTML = "Please enter a valid email address";
}
于 2013-04-25T15:09:07.477 に答える
0

ステートメントの結果に関係なく、フォームは送信されます。コードは機能していますが、フォームの送信によってページがリロードされています。追加return false;すると問題が修正されます。

<script type="text/javascript">


function validateEmail() {
    var emailRule =  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (emailRule.test(document.forms[0].email.value)) {
         document.getElementById("body").innerHTML = "Thank you for signing up for our newsletter! You will recieve a confirmation email shortly.";
         setTimeout("window.close()", 3000);
    }
    else
         window.alert("not valid");       //for debugging
         document.getElementById("message").innerHTML = "Please enter a valid email address";
         return false; // this stops the form from submitting, and the page from reloading.
}

</script>

</head>
<body id="body">
<p>If you sign up for our newsletter you will be entered into a drawing to win free clothes every month!</p>
<br>
<p id="message"> </p>
<form action="" onsubmit="validateEmail();">
<p>Email: <input type="text" name="email"/>
<input type="submit" value="Sign up"/></p>
<br>
<input type="button" value="No thanks" onclick="window.close()"/>
<br>
</form>
<p><a href="privacy.html">Privacy Policy</a></p>
</body>
</html>
于 2013-04-25T15:13:12.557 に答える