更新

Question

我有一个带有html的帐户注册表单。我有一个简单的密码验证检查与最小的JavaScript。验证字段正常工作。如果密码不匹配，则在尝试点击提交按钮时会显示一条消息。如果匹配，则单击提交时会重新加载相同的页面，而不是使用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>

Answer 1

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

您需要致电event.preventDefault()以阻止该网页刷新。

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

更新

因此，在进一步挖掘之后，您获得页面刷新而不是预期的表单操作（<form action="/path/to/results.html" method="get">）的原因是因为您有嵌套的<form>元素。第二个表单元素是您定义操作的位置，浏览器会忽略该操作。因此，浏览器使用默认操作，即刷新页面。清理你的HTML（以一种固执的方式），它可以像你期望的那样工作。

document
  .querySelector('[name="confirm"]')
  .addEventListener('input', check)

function check() {
  var password = document.querySelector('[name="password"]')
  var confirm = document.querySelector('[name="confirm"]')
  if (
    password.value !== confirm.value) {
      confirm.setCustomValidity('Password Must be Matching.');
  } else {
    confirm.setCustomValidity('');
  }
}

input {
  display: block;
  margin-bottom: 15px;
}

<form action="results.html" method="post">
  <fieldset>
    <legend>Create Account:</legend>
    <label>
      Username:
      <input type="text">
    </label>

    <label>
      Password:
      <input type="password" name="password" required>
    </label>

    <label>
      Confirm Password:
      <input type="password" name="confirm" required>
    </label>

    <input type="submit" value="Submit">
  </fieldset>
</form>

注意：这是使用POST方法，而不是GET。 GET显示URL中的输入值，这对于密码等敏感信息不利。 POST包含HTTP请求中的输入值。

干杯

使用html验证密码。获取请求重新加载页面而不是转到提交页面

1 个答案:

更新