2

非常に単純な質問...このようなパターンをhtml5で検証するにはどうすればよいですか...

(562) 810-5566 または (714) 433-4434

括弧とスペースが含まれていることに注意してください。

現在の入力コントロールは次のようになります。

<input type="tel" data-tel-msg="Invalid Phone Number!" class="k-textbox" pattern="^\d{3}-\d{3}-\d{4}$" required />

現在のパターンが 3334445555 に一致することは承知していますが、探しているものではありません。括弧を追加しようとすると、javascript コンソールで不正な正規表現構文のエラーが発生しました。ここで構文に関するヘルプが必要です。

また、おまけとして、カスタムエラーメッセージを表示する方法を知っていれば、それも役立ちます。現在、data-tel-msg が機能していません。

4

1 に答える 1

4

次のコードを使用できます。

input:valid {
  color: green;
}
input:invalid {
  color: red;
}
<form name="form1">
 <input value="(555) 324-5643" type="tel" title="Invalid Phone Number!" class="k-textbox" pattern="[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}" required />
 <input type="Submit"/> 
</form>

HTML5 パターンはデフォルトで (文字列の先頭と末尾に) 固定されているため、正規表現\(\d{3}\)\s\d{3}-\d{4}はフォーマット内の文字列と一致します。(###) ###-####

このtitle属性により、エラー テキストを表示できます。

お使いの環境でバックスラッシュが失われている場合は、それらを 2 つにするか\d、[0-9]. リテラルに一致させる\(には、文字クラスを使用することもできます: [(]( : についても同じ)) [)]。文字クラス内では、これら(と)は「特別な」グループ化の意味を失います。

于 2016-01-25T09:47:28.463 に答える