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フォーム仕様からの引用：

コンパイルされたパターンの正規表現は、文字列と一致する場合、その開始を文字列の先頭に固定し、その末尾を文字列の末尾に固定する必要があります。

注: これは、この属性に使用される正規表現言語が JavaScript で使用されるものと同じであるpatternことを意味し^(?:ます。最後に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 は「Awesome name!」の出力をトリガーします。コンソールに。

.blur とは別のトリガーで評価する必要があると思います。

于 2013-05-27T14:05:41.217 に答える