javascript 仅在电子邮件有效时提交表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10930134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submit the form only if email is valid
提问by xRobot
I need a way to submit a form only if email is valid. If email is NOT valid then show ONLY an alert ( below you can see my code ).
我需要一种仅在电子邮件有效时提交表单的方法。如果电子邮件无效，则仅显示警报（您可以在下面看到我的代码）。
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:
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>
The problem is that the form is submitted even if the email is NOT valid.
问题是即使电子邮件无效，也会提交表单。
How can I resolve this problem ?
我该如何解决这个问题？
回答by moribvndvs
You should attach return continueornot();to the onsubmitevent of the form, not the button's click event.
您应该附加return continueornot();到onsubmit表单的事件，而不是按钮的点击事件。
See this fiddle: http://jsfiddle.net/NdSmu/
看到这个小提琴：http: //jsfiddle.net/NdSmu/
回答by xdazz
You need the return value.
您需要返回值。
function continueornot() {
if(validateEmail(document.getElementById('emailfield').value)){
// ok
return true;
}else{ alert("email not valid"); return false;}
}
onclick="return continueornot();"
回答by mprabhat
<form method="post" action="register.php" enctype="multipart/form-data" onsubmit=" return continueornot();">
回答by Rich O'Kelly
The cleanest way to achieve this is to use the HTML5 pattern attribute as well as javascript:
实现这一点的最简洁方法是使用 HTML5 模式属性以及 javascript：
<input id="emailField" type="email" pattern="emailRegexHere">
Browser support varies for this attribute, however it will improve.
浏览器对此属性的支持各不相同，但它会有所改进。
The following markup should achieve your alert also:
以下标记也应达到您的警报：
<form method="post" action="register.php" enctype="multipart/form-data" onsubmit="return continueornot();">
In my opinion alerts are not the way to go here - they give a terrible user experience. Have a look at some javascript validation libraries that will display any errors in a more user friendly manner.
在我看来，警报不是解决问题的方法——它们会给用户带来糟糕的体验。查看一些 javascript 验证库，它们将以更用户友好的方式显示任何错误。
回答by Mudassir
you can simply use regular expression validator to validate the field of email instead of javascript function
您可以简单地使用正则表达式验证器来验证电子邮件字段而不是 javascript 函数
回答by Miqdad Ali
function continueornot() {
if(validateEmail(document.getElementById('emailfield').value)){
return true;
}else{ alert("email not valid"); return false;}
}
回答by Ritesh Agarwal
Is the return true; the only thing you've added? You don't need to return true to submit, you just need to not return false, though the problem the OP is having is that it is submitting despite returning false. (Because any return value is getting ignored in this case because the inline event attribute doesn't use it.) –
返回是否为真；你唯一添加的东西？你不需要返回真提交，你只需要不返回假，尽管 OP 的问题是尽管返回假，但它正在提交。（因为在这种情况下任何返回值都会被忽略，因为内联事件属性不使用它。） –
