密码的HTML5自定义验证

Question

输入2个不匹配的密码时，我想创建一个HTML5自定义验证消息。

这是我的HTML和JQuery

HTML：

<form class="form-group main-settings-form" id="main-settings-form-password">

    <input class="form-control main-settings-form-input password-main" type="password" placeholder="Enter new password" id="new-password" pattern='(?=.*\d)(.{6,})' required>

    <input class="form-control main-settings-form-input" type="password" placeholder="Retype new password" id="confirm-password" pattern='(?=.*\d)(.{6,})' required>

    <div class="main-settings-form-buttons">
        <button type="button" class="btn btn-danger settings-edit-cancel">Cancel</button>
        <button class="btn btn-success" type="submit">Save</button>
        <br>
        <br>
        <a href="#"> Forgot password? </a>

    </div>

</form>

JS：

$(document).ready(function () { //This confirms if the 2 passwords match

    $('#confirm-password').on('keyup', function (e) {

        var pwd1 = $("#new-password").get(0);
        var pwd2 = $("#confirm-password").get(0);
         pwd2.setCustomValidity("");

        if (pwd1 != pwd2) {
            document.getElementById("confirm-password").setCustomValidity("The passwords don't match"); //The document.getElementById("cnfrm-pw") selects the id, not the value
        }

        else {
            document.getElementById("confirm-password").setCustomValidity("");
            //empty string means no validation error
        }
        e.preventDefault();  //would still work if this wasn't present


});

});

问题是，即使密码确实匹配，也会始终触发该消息。 请仅在密码不匹配时帮助我触发消息，并在密码不匹配时安全提交。

JS小提琴： https ://jsfiddle.net/kesh92/a8y9nkqa/小提琴中的密码要求：6个字符，至少一个数字

Answer 1

jQuery get()返回每个元素的dom元素...它们永远不能相等

您要比较值。

尝试改变

if (pwd1 != pwd2) { //compare 2 dom nodes

至

if ( pwd1.value != pwd2.value) { //compare 2 dom node values

但是请注意，由于您已超出有效期，因此您现在还需要考虑空值