1

10進数の正規表現を作成しようとしていますが、同時に「-」または「+」記号を最初にオプションにすることもできます。

これについてはたくさんの情報があるので、私はこれで終わりました：

/^[+-]?\d+(\.\d+)?$/

そのため、関数を使用してコンソールでこれをテストしましたが、test()完全に機能しています。

私の質問は、このチェックをどこで行うかについてです。

  • チェックがオンになっている場合、間違った記号を「消費」するためにkeypress使用できますが、このようなテキストを取得していて、最後に入力された記号にアクセスできません -preventDefault()$(event.target).val()

  • チェックがオンになっている場合、keyupテキスト全体にアクセスできますが、間違ったシンボルを削除できません。これは、それがどれで、どこに配置されたかわからないためです (マウスを使用して、有効な文字列の先頭または途中)

シンボルのみを検証するのではなく、シンボルの組み合わせをチェックする必要があります。例えば：

- //invalid
- 1 //valid
1. //invalid
1.2 //valid

それで、文字列全体が入力されたときにチェックする必要があると思いますが、次に、間違った文字をどのように削除しますか? 無効なときに文字列全体を削除すると、正しく見えません。

4

1 に答える 1

4

以下は、ユーザーが入力を続けているときに入力に問題があるかどうかをユーザーに伝える 1 つの可能な方法です。サンプルデモについては、ここをクリックしてください。

さらに<div>、許可されている文字/形式のリストを追加することもできます。これは、何か問題があることをユーザーに知らせるだけでなく、有効な入力の形式をユーザーに通知します。

HTML:

<input id='ip' type='text'/>

JS:

var regex = new RegExp(/^[+-]?\s*\d+(\.\d+)?$/);

document.getElementById('ip').onkeyup = function(){
    var inputVal = this.value;
    if(!(regex.test(inputVal))) this.className='err';
    else this.className='noerr';
}

CSS:

.noerr{
    color: green;
}
.err{
    color: red;
}

注: HTML5 には、入力を検証する方法が組み込まれており、上記の例と同じよう:invalidに、および同じことを行う疑似クラスもあります。:validHTML5 を使用できる場合は、このサンプルを試してください。2 番目の入力フィールドは、HTML5 を使用して行われます (JS は必要ありません)。

HTML5:

<input id='iphtml5' pattern='[+-]?\s*\d+(\.\d+)?' type='text' />

CSS:

#iphtml5:valid{
    color: green;
}
#iphtml5:invalid{
    color: red;
}
于 2013-09-16T12:42:12.627 に答える