0

我正在将正则表达式与 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>
4

3 回答 3

0

试试这个正则表达式

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

小提琴

于 2013-05-24T20:32:35.980 回答
0

引用HTML5 Forms 规范：

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

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

另请注意，仅当元素的值不是空字符串时，该约束才适用。

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

于 2013-05-25T00:00:19.613 回答
0

您的代码实际上正在运行。我将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 将触发打印“真棒名字！” 到控制台。

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

于 2013-05-27T14:05:41.217 回答