正規表現の最大長は機能しません。

Question

function test() { 
    var regex = new RegExp("^[0-9]{1,11}$"); 
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); 
    if (!regex.test(key)) { 
     event.preventDefault(); 
     return false; 
    } 
} 

整数のみを使用するのは正しいですが、最大長は機能しません。それは11桁以上かかります。

Answer 1

あなたが言ったように：

を私は数字のみを書き込むようにして最大の長さは11（11）の数字でなければなりません許可を与えたいです。

次のことができます。

1. 正規表現/^\d{1,11}$/

document.addEventListener('DOMContentLoaded', function() { 
 
function valueIsValid(v) { 
 

 
    return /^\d{1,11}$/.test(v); 
 
} 
 
    var foo = document.querySelector('#foo'); 
 

 
foo 
 
    .addEventListener('change', function() { 
 
    console.log('valid', valueIsValid(foo.value), foo.value) 
 
    }) 
 
; 
 
});

<input id="foo" />

Answer 2

これを使用<input type="number" maxlength="11" />

を使用あなたの質問から私が理解したものです。このようなことを試してみてください。

var count = 0; 

function test() { 
    var regex = new RegExp("^[0-9]{1,11}$"); 
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); 

    if(count<11){ 
    if (!regex.test(key)) { 
     count=0; 
     event.preventDefault(); 
     return false; 
    } 
    count++; 
    } 
    return false; 
} 

Answer 3

手動入力の検証のこの種のアプリケーションは通常、HTML5でこのごろ書かれている方法ではありません。それは悪い古いjQueryの日の後戻りです。単にキーストロークを捨てるのは悪いユーザーエクスペリエンスです。ユーザーは何が間違っているのか分かりませんし、キーボードが壊れていると思うかもしれません。 keyupイベントでトラップした場合、ユーザーがテキストをドラッグして入力ボックスにドロップした場合など、いくつかのシナリオも見逃してしまいます。ユーザーがタイプボックスにテキストを貼り付けるCTRL + V場合は、あなたの代わりに貼り付けた文字のキーストロークを見てしまいます。

HTML5はあなたを可能にinput要素にpattern属性を追加しますregexpベースの検証を行います。これには多くの利点があります。たとえば、無効なエントリは、:invalid疑似クラスを持つCSSを使用してスタイル設定することができます。無効なフォームエントリは、送信を自動的に防止し、特定の問題を説明するユーザーフレンドリーなバルーンを表示します。彼らは、この場合、暗黙のです - 何^や$アンカーが必要とされていないことを

<input pattern="\\d{1, 11}"> 

注：お使いの場合には

。

JSは必要ありません。