使用 javascript 到 php 的表单验证答案

【问题标题】：form validation with javascript to php使用 javascript 到 php 的表单验证
【发布时间】：2011-09-25 11:07:19
【问题描述】：

我在 W3Schools 中找到了这段代码。这是关于使用 Javascript 进行表单验证的。

当用户磁带错误的邮件格式时，会出现警报。

当我检查我在表单 onsubmit="return validateForm(); 上看到的代码时，函数在错误情况下返回 false。

所以我的问题是如何从 javascript 中获取布尔值以在 PHP 中使用它来编写错误消息而不是使用消息框。

这是我的代码：

<html>
<head>
    <script type="text/javascript">
    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;
      }
    }
    </script>
    </head>

    <body>
    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
    Email: <input type="text" name="email">
    <input type="submit" value="Submit">
    </form>
</body>

</html>

提前致谢。

阿里

【问题讨论】：

W3Schools 不可靠：See W3Fools

标签： php javascript validation forms

【解决方案1】：

if (..)
{
   document.getElementByID('error').InnerHTML = "Not a valid e-mail address!";
   return false;
}
else
{
   document.getElementByID('error').InnerHTML = "";
}

并在您的标记中添加：

<span id="error"></span>

【讨论】：

【解决方案2】：

我不会为此使用 PHP。

<html>
<head>
<script type="text/javascript">
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)
  {
  document.getElementById('errorMsg').style.display = 'block';
  return false;
  }
}
</script>
</head>

<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
<div id="errorMsg" style="display: none;">Not valid email</div>
</form>
</body>

</html>

这样你就不必回到你的服务器了。

【讨论】：

【解决方案3】：

您无法从 javascript 中获取布尔值。您需要做的是提前准备好一个错误 div。像这样的：

<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<div id="error"></div>
<input type="submit" value="Submit">
</form>

添加 css 以隐藏它。然后在您的验证表单中，使用 javascript 更改错误 div 的 HTML。

  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
      document.getElementById("error").innerHTML="Not a valid e-mail address";
      return false;
  }

"return false;"部分是告诉表单不要提交。正如其他答案中提到的那样，PHP 和 Javascript 没有接口。 PHP是服务器端，Javascript是客户端。他们不互相交谈。但是，它们都可以修改 HTML。请记住，Javascript 总是在浏览器中运行。因此，如果它需要向 PHP 发送内容，您需要使用 AJAX 调用服务器端 PHP 脚本并以这种方式发送信息。然而，大多数时候，当您使用 Javascript 时，需要信息的不是 PHP，而是用户。所以使用 Javascript 来修改 HTML 就可以了。

【讨论】：

【解决方案4】：

最简单的就是在函数中做显示。将警报替换为以下内容：-

document.getElementById("errormessage").innerHTML="无效电子邮件地址”；

您的 HTML 中还需要一个带有错误消息 id 的 DIV。

【讨论】：

【解决方案5】：

在使用 AJAX 之外，你不能。请记住，PHP 是一种服务器端语言，而 JavaScript 在浏览器中的客户端上运行。当 PHP 在浏览器中呈现页面时，它已经完成了处理。您需要的是两层验证——JavaScript 验证和 PHP 验证。为什么？因为可以在浏览器中关闭 JavaScript。这使得它作为一种安全措施毫无用处。 JavaScript 验证只能用作增强用户体验的一种方式。

最后，不要去 w3schools。它的很多信息都是无效的（有关更多信息，请参见网站http://www.w3fools.com）。相反，请使用 Mozilla 的开发者网络：https://developer.mozilla.org/en-US/learn/

【讨论】：