26

テキスト入力のパターン属性を数値に限定することができません。JavaScript正規表現リストによると、[d]または[0-9]がそれを行う必要があります。しかし、

<input dir="ltr" type="text" title="Enter numbers only." pattern="[\d]{9}" id="uid" name="1" placeholder="Enter UID" required="'required'" class="required placeholder" minlength="9" maxlength="9" autocomplete="off" />

私には機能しません（どのブラウザでも）。次のようなjs検証を追加する必要があります（この投稿に基づいて、簡単にするためにこのルートに進むことにしました）：

HTML:

onkeypress='return isNumberKey(event)'

js:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

主に、パターン属性を機能させる方法があるかどうかを知りたいです。ただし、これにベスト プラクティス ルートを使用しているかどうかについてもお気軽にコメントしてください。<input type="number"/>HTML5はまだ十分にサポートされていないため、使用したくありません。

4

3 に答える 3

59

属性の検証によってpattern、フィールドへの誤った情報の書き込みが防止されるわけではありませんが、フォームの送信は防止されます。この要素にはoninvalid、送信中に検証が失敗したときに呼び出されるイベントもあります。

または、CSS セレクター:valid を使用して、:invalid視覚的なフィードバックを即座に提供することもできます。

両方を示すフィドル (コメントからのジェリーのフィドルに基づく): http://jsfiddle.net/bHWcu/1/

<form onsubmit="alert('Submitted');">
    <input dir="ltr" type="text" title="Enter numbers only." pattern="[\d]{9}" id="uid" name="1" placeholder="Enter UID" required="'required'" class="required placeholder" maxlength="9" autocomplete="off" />
    <input type="submit" value="Submit" />
</form>

クライアント側の検証は、ユーザー エクスペリエンスを向上させるための迅速なフィードバックにのみ使用する必要があることに注意してください。クライアント側の検証は簡単にだまされる可能性があるため、実際の検証は常にサーバー側で行う必要があります。

于 2013-09-28T12:18:01.870 に答える