在允许用户提交表单 JS 之前，我如何检查密码是否与确认密码匹配

Question

我有一个注册表单，我希望密码和确认密码字段在允许用户提交表单之前匹配。我有密码并确认密码匹配逻辑，但不知道如果不匹配，如何禁止用户提交
这是我在我的 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="[e-mail]" 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()
})



如果密码不匹配用户无法提交表单，我该如何做到这一点。

Answer 1

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'
}
}