想要 PHP 和 JS 表单（空字段/密码匹配）验证？

Question

我正在设计一个允许个人资料注册的电子商店。我需要对注册表单进行 Javascript 和 PHP 验证。 （因此，当任何字段为空时，我需要收到一条弹出消息，让我知道哪个特定字段为空 + 在所需字段旁边的屏幕上显示一条可视消息，以告知用户他们需要在哪里更正问题）

到目前为止它不起作用，因为我的 JS 验证表单激活了 onsubmit 并且我的 PHP 正在运行。我意识到 onsubmit 在行动之前激活，因此不允许“行动”通过。

我尝试将其从 'action' 更改为 'onclick'，但 onsubmit 也会先激活并且不允许 PHP 工作。

这是我的表单代码（我只包括了名字部分，所以不会太长）

<form method="post" onclick="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" name="myForm" onsubmit="return validateForm()" style="border:1px solid #ccc">

  <label><b>First Name</b></label>
<input type="text" name="firstName" placeholder="">
  <?php echo $fnameErr;?>

<button type="submit" class="signupbtn" name="submit">Submit</button>

这是我的 PHP 代码：

 <?php

    $fnameErr = "";
    $fname = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
       if (empty($_POST["firstName"])) {
            $fnameErr = "Name is required";
             } 
         else {
            $fname = test_input($_POST["firstName"]);
              }
             }

      function test_input($data) {
          $data = trim($data);
          $data = stripslashes($data);
          $data = htmlspecialchars($data);
          return $data;
        }
  ?>

我知道 PHP 代码有效，因为如果我删除 JS 验证，它会按预期工作。我很感激帮助。

如果我需要添加任何额外信息，请告诉我。此外，这不是我的第一站。我一直在谷歌搜索并试图弄清楚如何解决这个问题几个小时无济于事......

这是被调用的 JS 函数（也可以按预期工作）这也是缩短版本，仅包含名称，其余工作相同，更多 if 语句：

   function validateForm() {
   "use strict";
var fn = document.forms.myForm.firstName.value;
var ln = document.forms.myForm.lastName.value;
var em = document.forms.myForm.email.value;
var phone = document.forms.myForm.phone.value;
var pass = document.forms.myForm.psw.value;
var pass2 = document.forms.myForm.psw2.value;
if (fn === "") {
    window.alert("First name must be filled out");
    return false;
  }
} 

Answer 1

&lt;input type="text" name="firstName" <b><i>required</i></b>&gt;

您不需要任何 JavaScript。

此外：

<form action="" method="post">

如果您要回发到当前页面，则无需指定 action。如果你不小心，使用$_SERVER['PHP_SELF'] 可能是一个漏洞，如果你有它们，也会破坏“漂亮的 URL”。

Answer 2

正如@Niet The Dark Absol 所说，您可以使用required，但如果您坚持可以添加e.preventdefault，以防止在出现错误时提交表单。如果我们可以了解您的 Javascript 函数，我们可以适当地详细说明。

Answer 3

您应该更改您的onsubmit 部分并删除onclick。此外，您的表单无效，因为没有 action。

    
    document.getElementById('myForm').addEventListener('submit',validateForm);
    function validateForm(e) {
        "use strict";
        console.log(document.forms.myForm.firstName.value);
        var fn = document.forms.myForm.firstName.value;
        
        if (fn === "") {
            window.alert("First name must be filled out");
            e.preventDefault();
            return false;
        }
    }

<form action="https://stackoverflow.com/" method="post" id="myForm">
  <input type="text" name="firstName" >
  <input type="submit">
</form>

有几个错误...但导致您的问题的主要原因是 onsubmit="return validateForm()"。我还添加了 e.preventDefault() 它是为了防止表单提交，如果有错误。