在 HTML 表单中包含 jQuery 函数

Question

我想将我的 jQuery 函数调用到 HTML 标记中。我的登录表单连接到 Azure 数据库，我希望在客户端按下登录按钮时出现带有特定消息的模式弹出窗口（如果用户是数据库）。

在我的 jQuery 脚本中，如果连接为真，我想通过将我重定向到另一个页面来处理该错误，如果不是，则更改弹出窗口中的消息。

现在，它没有进入 jQuery 函数，我一直只得到真正的消息，即使它是假的。

jQuery 脚本：

<script>
  function checkForm(e) {
    e.preventDefault();
    $.post("https://studentshiftregister.azurewebsites.net/api/Login", function (data, status) {
      if (status === "200") {
        window.location.href = "#Portfolio";
        return true;
      } else {
        //display error information in the current form page
        $("#postLoginMessage").html("<font color=red>Login unsuccessfull!</font>");
        return false;
      }
    });
  }
</script>

HTML 表单：

<form action="https://studentshiftregister.azurewebsites.net/api/Login" method="post" role="form" class="contactForm" onsubmit="checkForm()">
  <div class="form-group">
      <input type="email" class="form-control input-text" name="email" id="email" placeholder="Email" data-rule="email" data-msg="Please enter a valid email" />
      <div class="validation"></div>
  </div>
  <div class="form-group">
    <input type="password" name="password" class="form-control input-text" id="password" placeholder="Password" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
    <div class="validation"></div>
  </div>

  <div class="text-center"><button id="myBtn" type="submit" class="input-btn" >Login</button></div>
</form>
<div id="myModal" class="modal" >

  <!-- Modal content -->
  <div class="modal-content" > 
    <span class="close">&times;</span>
    <p id="postLoginMessage">Welcome back!</p>
  </div>

</div>

Answer 1

您正在调用checkForm()，但没有参数，但该函数希望第一个参数是Event 对象，因此它可以调用e.preventDefault()。改变

onsubmit="checkForm()"

到：

onsubmit="checkForm(event)"