时间戳

首页 > 解决方案 > 如何使其通过 3 次验证，然后才能将表单操作发送到地址

javascript - 如何使其通过 3 次验证，然后才能将表单操作发送到地址

问题描述

我的代码当前验证名称/电子邮件和邮政编码是否有效，然后才能发送，当没有信息要以 action =“”形式发送的地址时。但是当我输入地址时，它会完全跳过验证，只发送任何内容，无论是空的还是非空的。

试图重新定位表单动作，但真的不知道。

<html>
<head>
<title>Online Food Delivery Form</title>
<h1>Online Food Delivery Form</h1>
</head>
<body>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"   
method="get"  onsubmit="return validation();">
Name* : <input type="text" name="name" id="name">
<br />
<br />
Email* :    <input type="email" name="email" id="email">
<br />
<br />
Postcode* : <input type="text" name="postcode" id="postcode" size="10">

<input type="reset" value="Reset"></button>
<input type="submit" name="submit" value="Submit"/>
</form>
<div id="eresult" style="color:red;"></div>
<script type="text/javascript">

function validation(){
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var postcode = document.getElementById('postcode').value;
if(name=='' || postcode=='' || email==''){
document.getElementById("eresult").innerHTML = "Name, Email and Postcode 
are required.";
return false;
}
else if(name.length<3){
document.getElementById("eresult").innerHTML = "Name must be more than 3 
characters.";
return false;
}
else if(postcode.length<4){
document.getElementById("eresult").innerHTML = "Postcode must be atleast 
4 characters.";
return false;
}
else {
return true;
}
}
</script>
</body>
</html>

预期结果是代码在将信息发送到指定站点之前验证电子邮件/姓名和邮政编码是否正确。但它做的完全相反。

标签： javascriptformsvalidation

解决方案

在您的验证中，您的错误消息是多行字符串

if(name=='' || postcode=='' || email==''){
document.getElementById("eresult").innerHTML = "Name, Email and Postcode 
are required.";
return false;
}
else if(name.length<3){
document.getElementById("eresult").innerHTML = "Name must be more than 3 
characters.";
return false;
}
else if(postcode.length<4){
document.getElementById("eresult").innerHTML = "Postcode must be atleast 
4 characters.";
return false;
}

如果你打开开发者控制台（通常是 F12），你会看到一个由 Invalid or Unexpected Token 引起的错误。将这些错误消息更改为适合一行以修复此错误：

if(name=='' || postcode=='' || email==''){
document.getElementById("eresult").innerHTML = "Name, Email and Postcode are required.";
return false;
}
else if(name.length<3){
document.getElementById("eresult").innerHTML = "Name must be more than 3 characters.";
return false;
}
else if(postcode.length<4){
document.getElementById("eresult").innerHTML = "Postcode must be atleast 4 characters.";
return false;
}

此外，您有一个结束</button>标签，但没有一个开始标签！从行中删除该标记<input type="reset" value="Reset"></button>。

希望这可以帮助！

推荐阅读