JQuery和HTML5自定义验证无法正常工作

Question

我刚开始在线学习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)(?=.*[AZ])(.{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

这里有几个问题。

1. 该模式没有捕获组，因此技术上没有任何东西可以匹配它。 将模式更改为(?=.*\\d)(?=.*[AZ])(.{6,})
2. $(this).value()不引用input标记的值，它指的是.password的值，即容器div。
3. getPW.checkValidity()和getPW.setCustomValidity("blah")正在一个字符串上运行，该字符串没有这些函数的定义，只有DOM对象才有。

这是你应该做的事情 （来自这个SO答案的 JS代码）

 $(document).ready(function() { $('.passwrdforsignup').on('invalid', function(e) { var getPW = e.target; getPW.setCustomValidity(""); if (!getPW.checkValidity()) getPW.setCustomValidity("This password doesn't match the format specified"); }).on('input', function(e) { $(this).get().setCustomValidity(""); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="password"> <label for="password">Password</label> <input type="password" class="passwrdforsignup" name="password" required pattern="(?=.*\\d)(?=.*[AZ])(.{6,})" /> </div> <input type="submit" /> </form> 

Answer 2

首先，更新这个：

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 。

工作JSFiddle