使用 JavaScript 在 HTML POST 表单中批准密码长度

Question

我正在制作一个具有简单登录/注销和注册功能的超级基本网站。 在 register.php 页面上，用户选择的用户名和密码通过 POST 从注册表中检索并存储在 mySQL 数据库中。 我添加了 JS 以确保密码长度至少为 8 个字符，至少包含一个数字，并且至少包含一个大写字母。

问题是，当用户单击提交按钮时，JS 和 PHP POST 命令都会执行。 如果我的 JS 说用户的密码不满足最低要求，我如何首先运行 JS 并停止我的脚本处理和发布表单？

编辑：这是一个班级项目，我们还没有学习 Ajax。 有人可以解释一下 1) 验证密码的过程，2) 返回密码是否有效，3) 如果密码无效，则显示（回显？）一条消息，以及 4）如果密码有效，则继续处理表单数据 POSTing有效的？ 我知道 JavaScript 是客户端，PHP 是服务器端，所以我真的不明白它们应该如何在这里交互。

代码如下。 正如一些评论者指出的那样，我在表单中使用 post。

  <form method="post" action="database.php"><fieldset><center>
      First Name  <input type='text' name='firstname' required><br><br>
      Last Name  <input type='text' name='lastname' required><br><br>
.
.
.
<input type='submit' value='Make My Account!'> <!-- Submit button -->
</center></fieldset></form>

这是我用来检查密码长度的 JS。 我不知道如何在表单之外执行 POST 命令。 另外，在 if/else 块中，我应该调用 PHP 函数吗？

var myInput = document.getElementById("password");
if(myInput.length()>8) {
  // post the form successfully
} else {
  // echo an error message
}

Answer 1

没有看到您的代码，很难知道发生了什么，但我怀疑您可能将表单方法设置为“post”，这会在验证运行之前将您的数据发送到服务器。 一个选项是在blur事件上验证密码。 此外，一旦所有内容都经过验证，最好使用 fetch api 或 ajax 将数据发布到服务器。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

https://developer.mozilla.org/en-US/docs/Web/API/Window/blur_event

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest