3

電子メールが有効な場合にのみフォームを送信する方法が必要です。電子メールが有効でない場合は、アラートのみを表示します (下に私のコードが表示されます)。

ジャバスクリプト:

 function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\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,}))$/;
    return re.test(email);
 } 


 function continueornot() {
    if(validateEmail(document.getElementById('emailfield').value)){
    // ok
    }else{ alert("email not valid"); return false;}
 }

HTML:

<form method="post" action="register.php" enctype="multipart/form-data">
<table>
<tr><td>Email:</td></tr>
<tr><td><input type="text" size="30" name="email" id="emailfield"> </td></tr>
<tr><td>Password:</td></tr>
<tr><td><input type="password" size="30" name="password"> </td></tr>
</table>
<input name="steptwo" value="Create Account" type="submit" onclick="continueornot();"/>
</form>

問題は、電子メールが有効でない場合でもフォームが送信されることです。

この問題を解決するにはどうすればよいですか?

4

7 に答える 7

8

ボタンのクリック イベントではなく、フォームのイベントにアタッチする必要がreturn continueornot();あります。onsubmit

このフィドルを参照してください: http://jsfiddle.net/NdSmu/

于 2012-06-07T10:38:19.127 に答える
2

戻り値が必要です。

function continueornot() {
    if(validateEmail(document.getElementById('emailfield').value)){
      // ok
      return true;
    }else{ alert("email not valid"); return false;}
 }


onclick="return continueornot();"
于 2012-06-07T10:38:49.030 に答える
1 
<form method="post" action="register.php" enctype="multipart/form-data" onsubmit=" return continueornot();">
于 2012-06-07T10:39:18.890 に答える
1

これを実現する最もクリーンな方法は、HTML5 パターン属性と JavaScript を使用することです。

<input id="emailField" type="email" pattern="emailRegexHere">

この属性に対するブラウザのサポートはさまざまですが、改善される予定です。

次のマークアップでもアラートを達成する必要があります。

<form method="post" action="register.php" enctype="multipart/form-data" onsubmit="return continueornot();">

私の意見では、アラートはここで使用する方法ではありません。アラートはひどいユーザー エクスペリエンスをもたらします。よりユーザーフレンドリーな方法でエラーを表示するいくつかの JavaScript 検証ライブラリを見てください。

于 2012-06-07T10:43:55.570 に答える
0 
function continueornot() {
    if(validateEmail(document.getElementById('emailfield').value)){
    return true;
    }else{ alert("email not valid"); return false;}
 }
于 2012-06-07T10:38:39.063 に答える
0

JavaScript関数の代わりに正規表現バリデーターを使用して、電子メールのフィールドを検証するだけです

于 2012-06-07T10:59:56.380 に答える