仅当电子邮件有效时,才提交表单
Submit the form only if email is valid
>我需要一种仅在电子邮件有效时才提交表单的方法。如果电子邮件无效,则仅显示警报(下面您可以看到我的代码)。
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>
问题是即使电子邮件无效,表单也会提交。
如何解决此问题?
应将return continueornot();
附加到窗体的onsubmit
事件,而不是按钮的单击事件。
看到这个小提琴:http://jsfiddle.net/NdSmu/
你需要返回值。
function continueornot() {
if(validateEmail(document.getElementById('emailfield').value)){
// ok
return true;
}else{ alert("email not valid"); return false;}
}
onclick="return continueornot();"
<form method="post" action="register.php" enctype="multipart/form-data" onsubmit=" return continueornot();">
实现此目的的最干净方法是使用 HTML5 pattern 属性以及 javascript:
<input id="emailField" type="email" pattern="emailRegexHere">
浏览器对此属性的支持有所不同,但会有所改进。
以下标记还应实现警报:
<form method="post" action="register.php" enctype="multipart/form-data" onsubmit="return continueornot();">
在我看来,警报不是去这里的方式 - 它们提供了糟糕的用户体验。看看一些JavaScript验证库,它们将以更用户友好的方式显示任何错误。
function continueornot() {
if(validateEmail(document.getElementById('emailfield').value)){
return true;
}else{ alert("email not valid"); return false;}
}
您可以简单地使用正则表达式验证器来验证电子邮件字段,而不是JavaScript函数
返回是否为真;您唯一添加的内容?你不需要返回 true 来提交,你只需要不返回 false,尽管 OP 遇到的问题是它尽管返回了 false,但它仍在提交。(因为在这种情况下,任何返回值都会被忽略,因为内联事件属性不使用它。–
相关文章:
- Jquery提交表单而不刷新
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- 每次提交表单时都会重新加载网页
- Razor中的自动提交表单
- 使用 JavaScript 自动提交表单
- 点击相同的按钮打开模型,然后提交表单
- 添加和删除隐藏字段数组中的值,而不提交表单
- 使用Ajax提交表单
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在不重新加载的情况下提交表单,并使用Node+Express将数据传递回同一页面
- 有登录表单时无法提交表单
- 带有select的jquery提交表单不起作用
- 如何防止回车键提交表单,但仍然允许回车工作
- 使用按钮和单选按钮提交表单,但始终使用相同的值
- 在提交表单之前确定重复值
- 如何创建动态ajax提交表单
- HTML提交表单,同时包含空字段检查和按钮隐藏
- 如何使用jQueryAjax使用动态html输入texbox提交表单
- 当触发下拉列表的onchange事件时,使用JavaScript提交表单
- 提交表单后,Watir文本框输入未持续(重置为以前的文本框输入)