web-dev-qa-db-ja.com

入力パターン属性が数値に対して機能しないのはなぜですか？

テキスト入力で パターン属性 を数値に限定して取得できません。 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検証を追加する必要があります（ this post に基づいて、簡単にするためにこのルートに進むことを決定しました）：

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;
}

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

javascripthtmlregex
17
levininja

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>

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

39
Ingo Bürk