Html5 Номер телефона Проверка с скобкой

Question

Очень простой вопрос ... как я могу проверить в 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 не работает.

Answer 1

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

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>

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

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

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