Though field validation and data formatting are the biggest challenges of working with web browsers, HTML5 does some help in enforcing this for us.
Telephone input field can be created using type=”tel”:
<input type="tel"
name="phone_num"
id="phone_num"/>
This looks like every other input field, with the difference that it optimizes the keyboard. Certain platforms like tablets, or smartphones will pop-up only-numeric keyboard for this input field.
It is hard to enforce particular regular expression through HTML because of variety of phone number formats used along with differences in country codes, and number separators. It remains the sole responsibility of the developer to implement these checks through JavaScript or other library function.
For example, here is the pattern for common USA phone format: [+]\d{2}[(]\d{2}[)]\d{4}[-]\d{4}
you can apply this format using the pattern attribute:
<input type="tel"
name="phone_num"
id="phone_num"
pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}"
/>
This page has some more examples for phone number patterns in different regions
tel input type is currently supported in all major modern browsers. The full numeric keypad makes a great user experience.