Question

我正在测试一个代码示例，它将值从php传递给JavaScript，以便测试表单值。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Page 1</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
 <form method="post" action="essai.php">
    <input type="text" name="mail" id="mail" placeholder="mail"/><br />
    <input type="submit" value="Validate" />
 </form>

     <?php
        if (isset($_POST['mail'])){
            $data=789;
        }
    ?>    


  <script>


    var data = <?php echo json_encode($data); ?>;

    $(function(){

      $("form").on("submit", function() {
      if($("#mail").val().length < 4) {
          alert(data);
          return false;
      }

    });
  });

  </script>

</body>
</html>

因此，当输入少于4个字符时，它会弹出一条消息（789）。

当我在表单中输入一个字母，然后直接按回车键弹出即可。但是，当我填写表单（仍然只有一个字母）时，点击页面上的其他位置，然后点击验证，弹出窗口不会出现。

我看不出为什么会出现这种行为，也许是因为我点击页面上的其他位置，撤消JavaScript操作，但为什么？

有人有解释吗？

谢谢

Answer 1

将您的HTML更改为此

 <form method="post" action="essai.php">
    <input type="text" name="mail" id="mail" placeholder="mail"/><br />
    <input type="submit" name="submit" value="Validate" />
 </form>

PHP到此

<?php
        if (isset($_POST['submit'])){
            $data=789;
        }
    ?>

JS

  <script>


    var data = <?php echo json_encode($data); ?>;

    $(function(){

      $("form").on("submit", function() {
      if($("#mail").val().length < 4) {
          alert(data);
          return false;
      }
      else { $(this.form).submit(); }

    });
  });

  </script>

提交表单时的奇怪行为

1 个答案: