Question

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

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>

问题是即使电子邮件无效，表单也会提交。

如何解决此问题？

Answer 1

您应该将return continueornot();附加到表单的onsubmit事件，而不是按钮的点击事件。

看到这个小提琴：http://jsfiddle.net/NdSmu/

Answer 2

您需要返回值。

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


onclick="return continueornot();"

Answer 3

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

Answer 4

实现这一目标的最简单方法是使用HTML5模式属性以及javascript：

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

浏览器支持因此属性而异，但会有所改进。

以下标记也应该实现警报：

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

在我看来，警报不是去这里的方式 - 它们给用户带来了糟糕的体验。看看一些javascript验证库，它们会以更加用户友好的方式显示任何错误。

Answer 5

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

Answer 6

你可以简单地使用正则表达式验证器验证电子邮件的字段而不是javascript函数

Answer 7

回报是否真实;你唯一添加的东西？你不需要返回true来提交，你只需要不返回false，虽然OP所遇到的问题是它提交尽管返回false。（因为在这种情况下会忽略任何返回值，因为内联事件属性不使用它。） -

仅在电子邮件有效时提交表单

7 个答案: