我有一个注册表单，我希望密码和确认密码字段在允许用户提交表单之前匹配。我有密码并确认密码匹配逻辑，但不知道如果不匹配，如何禁止用户提交
这是我在我的 html 中的表单
```javascript
<form action="/register" method="post" novalidate class="mt-4" class="form">
<div class="mb-3">
<label for="username" class="form-label">Company Name*</label>
<input type="text" class="form-control" required id="username" name="username"
placeholder="Facebook Ltd">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address*</label>
<input type="email" class="form-control" required id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="John@gmail.com" name="email">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password*</label>
<input type="password" class="form-control password" required id="password
placeholder="Min 8 Characters" name="password">
</div>
<div class="mb-3">
<label for="confirm-password" class="form-label">Confirm Password*</label>
<input type="password" class="form-control confirm-password" required id="confirm-password" placeholder="Must Match">
<span class="matching-txt mt-1">Not Matching</span>
</div>
<button class="confirm-pwd" type="submit" class="btn mt-3 submit-btn">Sign-up</button>
</form>
这是我在 keyup 上比较密码字段和确认密码字段的逻辑
```javascript
// Password and Confirmed passwords validation
let pwd = document.querySelector('.password');
let confirmPwd = document.querySelector('.confirm-password')
let matchingTxt = document.querySelector('.matching-txt')
let form = document.querySelector('.form')
function comparePwd() {
if (confirmPwd.value) {
if (pwd.value != confirmPwd.value) {
matchingTxt.style.display = 'block'
matchingTxt.style.color = 'red'
matchingTxt.innerHTML = 'Not Matching'
e.preventDefault()
} else {
matchingTxt.style.display = 'block'
matchingTxt.style.color = 'green'
matchingTxt.innerHTML = 'Matching'
}
} else {
matchingTxt.style.display = 'none'
}
}
confirmPwd.addEventListener('keyup' , () => {
comparePwd()
})
pwd.addEventListener('keyup' , () => {
comparePwd()
})
如果密码不匹配用户无法提交表单，我该如何做到这一点。
HTML 表单元素可以通过填充其onsubmit属性在提交之前使用特殊的比较功能。这意味着该novalidate属性不得存在。
您的comparePwd()函数只需要稍作调整：它需要返回false，以防出现问题 - 例如密码不匹配。
所以只需将表单更改为：
<form action="/register" method="post" onsubmit="return comparePwd()" class="mt-4" class="form">
以及对此的比较功能：
function comparePwd() {
if (confirmPwd.value) {
if (pwd.value != confirmPwd.value) {
matchingTxt.style.display = 'block'
matchingTxt.style.color = 'red'
matchingTxt.innerHTML = 'Not Matching'
return false
e.preventDefault()
} else {
matchingTxt.style.display = 'block'
matchingTxt.style.color = 'green'
matchingTxt.innerHTML = 'Matching'
}
} else {
matchingTxt.style.display = 'none'
}
}
点击提交 的时候， ajax 的上面 获取 表单值 ，正则验证一下 。通过再提交请求 ajax
方法多了,比如在组件上禁用按钮,或者提交的的时候判断一把