一种形式的两个动作答案

【问题标题】：Two actions in one form一种形式的两个动作
【发布时间】：2017-06-29 10:29:11
【问题描述】：

我有一个表格，我需要使用其中的操作。一个用于获取在字段中输入的信息并将用户重定向到另一个页面，另一个用于检查电子邮件验证。电子邮件验证是针对第一个字段的，其他字段是正常的这是我的代码：

<form name="myform" class="login" action="getinfo.php" method="POST">
<input name="f1" type="text" placeholder="email" autofocus/>
<input name="f2" type="password" placeholder="example2"/>

这是检查电子邮件第一个字段的 js 代码：

function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
    alert("Not a valid e-mail address");
    return false;
}

我不知道如何以一种形式使用两个动作在此先感谢，希望我已经足够简洁和准确。

【问题讨论】：

建议在服务器端执行验证，因为 JS 可以被禁用并且在某些情况下可能不可靠。
不要给action属性赋值，在点击提交按钮时根据你的条件赋值就可以了
电子邮件验证是客户端 JavaScript。表单操作是提交数据以供处理服务器端的 URL。使用操作来运行该 JavaScript 是没有意义的。去自学addEventListener函数和submit事件。
运行验证，处理表单的提交事件。防止默认回发行为。运行您的验证。如果通过，请使用脚本提交表单。如果失败，只显示错误。正如其他人所说，在服务器上再次验证它，因为 JS 验证很容易被绕过。这对增强用户体验很有好处，但你不能依赖它。下载到浏览器的任何内容 - HTML、脚本等都可以被恶意用户或脚本轻松操纵，因此您不能信任从客户端发回的任何内容。
@MaD 您可以根据需要在任何地方进行验证，而不仅仅是在一个地方。后端对其进行验证以确保仅输入有效的电子邮件，无论从何处调用服务方法（或类似方法）。前端也对其进行验证，因为这很可能是用户看到电子邮件在表单上有效的业务需求。如果您可以在现场验证电子邮件地址，则您不希望通过完整的服务器往返来验证电子邮件地址。只做服务器端是一个糟糕的建议。你两个都做。

标签： javascript php html

【解决方案1】：

要实现您想要的，同时保持与您所拥有的最接近，您可以这样做：

function validateForm() {
  var x = document.forms["myform"]["f1"].value; //changed to "myform" and "f1"
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
      alert("Not a valid e-mail address");
      return false;
  }
}

<!--onsubmit handler added to <form> -->
<form name="myform" class="login" action="getinfo.php" method="POST" onsubmit="return validateForm()"> 
  <input name="f1" type="text" placeholder="email" autofocus/>
  <input name="f2" type="password" placeholder="example2"/>
  <input type="submit"> <!--submit button was missing -->
</form>

请注意，重要的部分是提交处理程序，它在您提交表单时运行，如果您希望提交表单，则返回true，否则返回false，您错过了。

在服务器端进行验证也很重要，否则任何用户都可能禁用 javascript 并绕过验证。附带说明一下，将电子邮件输入的类型更改为电子邮件已经强制通过浏览器进行验证，这更容易。

【讨论】：

非常感谢。我可以使用按钮标签而不是输入类型 = 提交吗？
是的，添加一个值属性，使用您想要的名称 (<input .... value="someName">)。我没有命名它，所以它默认提交。
非常感谢你救了我