密码和密码确认不匹配后如何取消提交表单

Question

我正在尝试为我的网站做一个注册页面，我不知道如何阻止用户在密码和确认密码不匹配后点击提交。

如果两个密码不匹配，我有一个“警报”功能。

HTML：

<input type="password" name="password" value="" id="password" placeholder="Password">
<input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password" onkeyup='check();'/>
span id='message'></span>

JS：

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'Passwords are matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'Passwords does not match' ;
  }
}

我在考虑布尔函数，但我不知道如何在里面调用它以及如何取消提交。

Answer 1

在您的 JS 中，为什么不将值放入变量中？没必要，但会让 JS 更干净

在该函数 ID 中执行类似

的操作

var password = document.getElementById('password').value
var confrm_password = document.getElementById('confirm_password').value


const button = document.getElementById('button') (Or however you want to target the button, up to you)

并且比 button.disabled = (password === confirm_password))

Answer 2

为您的<form onsubmit="validate()">添加验证功能

在提交事件上调用preventDefault 将阻止表单实际提交。

function validate(event) {
  if (!passesValidation) event.preventDefault();
}

Answer 3

您可以在密码不匹配时禁用按钮

document.getElementById("Button").disabled = false;