Javascript 密码验证与html。Get请求重新加载页面，而不是转到提交页面

我有一个帐户登记表与html。我用最少的javascript进行了简单的密码验证检查。验证字段工作正常。如果密码不匹配，则在尝试点击提交按钮时会显示一条消息。如果它们确实匹配，则单击submit时将重新加载同一页面，而不是使用GET请求转到results.html页面。我不知道为什么会这样

<form>
<fieldset>
<legend>Create Account:</legend>
Username: <input type="text"><br>
<p>Password:</p>
<input name="password" required="required" type="password" id="password" />
<p>Confirm Password:</p>
<input name="password_confirm" required="required" type="password" 
id="password_confirm" oninput="check(this)" />
<script language='javascript' type='text/javascript'>
function check(input) {
    if (input.value != document.getElementById('password').value) {
        input.setCustomValidity('Password Must be Matching.');
    } else {
        // input is valid -- reset the error message
        input.setCustomValidity('');
    }
}
</script>
<br /><br />
<form action="/path/to/results.html" method="get">
<input type="submit" value="Submit" 
     name="Submit" id="frm1_submit" />
</form>
</fieldset>
</form>

---

这是因为浏览器对表单提交事件的默认操作是重新加载页面

您需要调用event.preventDefault以防止页面刷新

document
  .querySelector('form')
  .addEventListener('submit', function (event) {
    event.preventDefault()
  })

使现代化 因此，在进一步挖掘之后，您得到页面刷新而不是预期的表单操作的原因是因为您有嵌套的元素。第二个表单元素是定义动作的位置，浏览器将忽略该动作。因此，浏览器使用默认操作，即刷新页面。以一种固执己见的方式清理HTML，它会像您预期的那样工作

文件 .querySelector“[name=confirm]” .addEventListener“输入”，检查 功能检查{ var password=document.querySelector“[name=password]” var confirm=document.querySelector“[name=confirm]” 如果 password.value！==confirm.value{ 确认。setCustomValidity“密码必须匹配”； }否则{ 确认有效性； } } 输入{ 显示：块； 边缘底部：15px； } 创建帐户： 用户名： 密码： 确认密码：

---

这应该被添加到js函数中吗？谢谢你简洁的回答。不过，现在看来这使得密码验证无效。我将js放在html正文中的一个脚本标记中，它似乎仍然没有相互验证密码。它正在重定向而不进行检查。@dj2请只关注我在更新中共享的示例在清理完我的标记后，例如，+1对于该验证工具，顺便说一句，它现在似乎正在工作。我把标签放错了地方，导致了问题，而且我把js脚本放在哪里似乎也引起了问题。再次感谢您的提示。您是否知道如果您使用method=get，那么密码将作为URL的一部分以明文形式传递？另外，你不能把一个放在另一个里面——只要使用浏览器的DOM检查器将动作和方法移动到第一个，你就会看到它实际上已经删除了内部formI，我知道这一点。感谢您指出嵌套问题。