Question

我正在使用带有HTML5模式功能的正则表达式并且它按预期工作，但是当我在JQuery的.test函数中使用相同的函数它没有按预期工作。有什么建议吗？

<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#firstName').blur(function() {
                if(!(/[A-Za-z']{3,14}/.test($('#firstName').val()))){
                    alert("thats not a good first name");
                }
            });
        });
    </script>
</head>
    <input type="text"id="firstName" placeholder="first name" pattern="[a-zA-Z']{3,14}" /> 

    <style type="text/css">input:valid{background:green;}input:invalid{background:red;}</style>

Answer 1

尝试使用此正则表达式

$('#firstName').blur(function () {
     if (!(/^([a-zA-Z]){3,14}$/.test($('#firstName').val()))) {
         alert("thats not a good first name");
     }
});

FIDDLE

Answer 2

引用HTML5 Forms specification：

编译后的模式正则表达式在与字符串匹配时，必须将其开始锚定到字符串的开头，并将其结束锚定到字符串的末尾。

注意：这意味着用于此属性的正则表达式语言与JavaScript中使用的正则表达式语言相同，只是pattern属性与整个值匹配，而不仅仅是任何子集（有点像它）隐含在模式开头的^(?:和最后的)$。

另请注意，如果元素的值不是空字符串，则约束仅适用。

因此，如果您希望javascript测试与HTML模式约束匹配，则只需在字段不为空时执行测试，并确保模式匹配整个值或修改模式以包含{{ 1}}和^代码。

Answer 3

您的代码实际上正在运行。我将Javascript更改为：

   <script type="text/javascript">
        $(document).ready(function () {
            $('#firstName').blur(function() {
                if((/[A-Za-z']{3,14}/.test($('#firstName').val()))){
                    console.log("Awesome name!");
                }
            });
        });
    </script>

输入有效输入然后更改对元素的关注后，console.log将触发打印'Awesome name！'到控制台。

我认为您需要评估与.blur不同的触发器。

正则表达式在HTML中工作但不与JQuery的测试函数一起工作

3 个答案: