0〜22の数値のHTML5入力パターンの一致確認

Question

0〜22の数値を入力するには、入力のパターン検証を使用するにはどうすればよいですか？私は私が使用できることを知っている：

<input type="number" min="0" max="22" /> 

が、私はその正規表現をしようとしていたtype="text"を使用する必要があります：/^(0?[1-9]|2[012])$/をそれは私が期待したものではありません。

誰でも手伝ってもらえますか？

Answer 1

0から22まで、あなたがする必要はありません

pattern="[10]?[0-9]|2[012]" 

注意を使用する必要がありますpatternの属性は、デフォルトで^(?:（開始時）と)$（末尾）で正規表現をラップするので、^と$を使用します。

どのようにそれが動作しません：[10]?[0-9]マッチオプション1または0、それの後に任意の数字（つまり、19まで0/00である）、または（|）、その後2[012]マッチ2と0、1または2のいずれかを。

は実際には、 '0'または '00'値がいずれかのためにOPの正規表現では計上されなかったregex demo

input:valid { 
 
    color: green; 
 
} 
 
input:invalid { 
 
    color: red; 
 
}

<form name="form1"> 
 
<input pattern="[10]?[0-9]|2[012]" title=""/> 
 
<input type="Submit"/> 
 
</form>

Answer 2

あなたが接近していたが、あなたは1始まる口座番号にかかりませんでした：

/^([0-1]?[0-9]|2[0-2])$/