我刚刚开始在线学习JS,Jquery和HTML。我有一个问题,并尝试做类似SO上类似问题的答案中所述的操作,但这无济于事。

我有一个密码表单,该表单仅接受具有至少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");
        }

    });

});

再次,比你们所有人都提前!

最佳答案

首先,更新此:

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!

为此,文本框(和提交按钮)必须form中。

Working JSFiddle

关于javascript - jQuery和HTML5自定义验证无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35821348/

10-09 04:39