Проверка номера телефона Html5 с круглыми скобками

Question

Очень простой вопрос... как мне проверить в html5 такой шаблон...

[phone] или [phone]

Обратите внимание, что он будет содержать скобки и пробел.

Мой текущий контроль ввода выглядит следующим образом.

<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 не работает.

Answer 1

Вы можете использовать следующий код:

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

<form name="form1">
 <input value="[phone]" type="tel" title="Invalid Phone Number!" class="k-textbox" pattern="[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}" required />
 <input type="Submit"/> 
</form>

Регулярное выражение \(\d{3}\)\s\d{3}-\d{4} соответствует строки в (###) ###-#### формат, поскольку шаблон HTML5 по умолчанию привязан (к началу и концу строки).

title Атрибут позволяет отображать текст ошибки.

Если обратная косая черта в вашей среде потеряна, просто удвойте их или замените \d с [0-9], Чтобы соответствовать буквальному \( Вы также можете использовать класс символов: [(] (то же самое для ): [)]). Внутри класса персонажа эти ( а также ) теряют свое "особое" групповое значение.