3

仅当电子邮件有效时，我才需要一种提交表单的方法。如果电子邮件无效，则仅显示警报（您可以在下面看到我的代码）。

JAVASCRIPT：

 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 回答
-1

返回是否为真；你唯一添加的东西？您无需返回 true 即可提交，您只需要不返回 false，尽管 OP 遇到的问题是尽管返回 false，但它仍在提交。（因为在这种情况下，任何返回值都会被忽略，因为内联事件属性不使用它。） -

于 2013-10-13T01:08:12.590 回答