Javascript 用户在提交时的输入验证

Question

HTML：

      <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
        <form name="#" method="POST" onsubmit="return validateForm();">
            <table>
                <tr>
                    <td>Select Warehouse:</td>
                    <td><input type="text" id="W_ID" name="W_ID" placeholder="numbers only"></td>
                    <span class="invalid-feedback"><?php echo $warehouse_err; ?></span>
                </tr>
                <tr>
                    <td>Select District:</td>
                    <td><input type="text" id="D_ID" name="D_ID" placeholder="numbers only"></td>
                    <span class="invalid-feedback"><?php echo $district_err; ?></span>
                </tr>
                <tr>
                    <td>Select Customer:</td>
                    <td><input type="text" id="C_ID" name="C_ID" placeholder="numbers only"></td>
                    <span class="invalid-feedback"><?php echo $customer_err; ?></span>
                </tr>
            </table>

所以我尝试验证用户输入的 W_ID、C_ID 和 D_ID。例如，如果用户输入的是一些字符串，则在提交之前返回错误消息。我在这个 .php 文件中写了一些 Javascript 代码，但我无法让它工作。请看下面的JS代码：

Javascript：

        <script>
        function validateForm(){
        var W_ID = document.getElementById("W_ID").value;
        var D_ID = document.getElementById("D_ID").value;
        var C_ID = document.getElementById("C_ID").value;
        var numbers = /^[0-9]+$/;

        //check if input is number
        if(!(W_ID.value.match(numbers) {
            alert('Please only enter numbers.');
        }
        else if(!(D_ID.value.match(numbers) {
            alert('Please only enter numbers.');
        }
        else if(!(C_ID.value.match(numbers) {
            alert('Please only enter numbers.');
        }else {
            alert('Successfully! form has been submitted.');
        }
        </script>

另外，我如何在 PHP 中封装 JS 代码？非常感谢！我卡了很久

Answer 1

“表单不得包含其他表单元素。”所以你不必使用两个<form> 标签。

只需给您的表单一个 ID，然后在 JavaScript 中处理提交事件。

<form
   id="myForm"
   action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>"
   method="POST"
   >
   <table>
      <tr>
         <td>Select Warehouse:</td>
         <td>
            <input
               type="text"
               id="W_ID"
               name="W_ID"
               placeholder="numbers only"
               />
         </td>
         <span class="invalid-feedback"><?php echo $warehouse_err; ?></span>
      </tr>
      <tr>
         <td>Select District:</td>
         <td>
            <input
               type="text"
               id="D_ID"
               name="D_ID"
               placeholder="numbers only"
               />
         </td>
         <span class="invalid-feedback"><?php echo $district_err; ?></span>
      </tr>
      <tr>
         <td>Select Customer:</td>
         <td>
            <input
               type="text"
               id="C_ID"
               name="C_ID"
               placeholder="numbers only"
               />
         </td>
         <span class="invalid-feedback"><?php echo $customer_err; ?></span>
      </tr>
   </table>
   <button type="submit">Submit</button>
</form>

脚本可能如下所示：

var form = document.getElementById("myForm");

form.addEventListener("submit", function (e) {
  e.preventDefault();

  var target = e.target;
  var formData = new FormData(target);
  var data = Object.fromEntries(formData.entries());

  var regex = /^[0-9]+$/;
  if (
    !data.W_ID.match(regex) ||
    !data.D_ID.match(regex) ||
    !data.C_ID.match(regex)
  ) {
    alert("Only numbers accepted.");
  } else {
    // Continue form submittion.
    this.submit();
  }
});

https://codesandbox.io/s/keen-galileo-tvznl?file=/script.js:0-439