javascript - JQuery 和 HTML5 自定义验证未按预期工作

Question

我刚开始在线学习 JS、Jquery 和 HTML。我有一个问题，并尝试做类似问题的答案中提到的事情，但这无济于事。

我有一个密码表单，它只接受至少 6 个字符、一个大写字母和一个数字的输入。我希望显示一条自定义验证消息，它可以再次说明这些条件。

这是我的 HTML 代码 -

<div class="password">
     <label for="password"> Password </label>
         <input type="password" class="passwrdforsignup" name="password" required pattern="(?=.*\d)(?=.*[A-Z]).{6,}"> <!--pw must contain atleast 6 characters, one uppercase and one number-->
    </div>

我正在使用 JS 来设置自定义验证消息。

JS代码

$(document).ready(function () {

    $('.password').on('keyup', '.passwrdforsignup', function () {
        var getPW = $(this).value();
        if (getPW.checkValidity() === false) {
            getPW.setCustomValidity("This password doesn't match the format specified");
        }

    });

});

但是，自定义验证消息不会显示。请帮忙。非常感谢您! :)

更新 1

我将密码模式更改为 (?=.*\d)(?=.*[A-Z])(.{6,})。根据 4caSTLe 的建议，我意识到我的 javascript 中存在一些错误，并相应地进行了更改。但是，自定义验证消息仍然没有显示。

JavaScript:

$(document).ready(function () {

    $('.password').on('keyup', '.passwrdforsignup', function () {
       var getPW =  $(this).find('.passwrdforsignup').get();       
        if (getPW.checkValidity() === false) {
            getPW.setCustomValidity("This password doesn't match the format specified");
        }

    });

});

再一次，比你们都提前!

Answer 1

首先，更新一下:

var getPW =  $(this).find('.passwrdforsignup').get();

为此:

var getPW =  $(this).get(0);

...因为 $(this) 已经是文本框 .passwrdforsignup，所以您无法在其自身中找到它!

setCustomValidity 的问题在于，它仅在您提交表单后才起作用。所以可以选择这样做:

$(function () {
    $('.password').on('keyup', '.passwrdforsignup', function () {
       var getPW =  $(this).get(0);    
       getPW.setCustomValidity("");
        if (getPW.checkValidity() === false) {
            getPW.setCustomValidity("This password doesn't match the format specified");
            $('#do_submit').click();
        }
    });
});

请注意 getPW.setCustomValidity(""); 重置消息这很重要 因为如果你不这样做，getPW.checkValidity( ) 将始终 为false!

要使其正常工作，文本框(和提交按钮)必须采用表单。

Working JSFiddle