Regular Expressions html5

Regular Expressions html5

Thanks to the new pattern attribute, we can insert a regular expression directly into our markup.

<form action="" method="post">
 <label for="username">Create a Username: </label>
    <input type="text"
    name="username"
    id="username"
    placeholder="4 <> 10"
    pattern="[A-Za-z]{4,10}"
    autofocus
    required>
 <button type="submit">Go </button>
</form>

If you’re moderately familiar with regular expressions, you’ll be aware that this pattern:
[A-Za-z]{4,10} accepts only upper and lowercase letters. This string must also have a minimum of four characters, and a maximum of ten.

HTML5's Phone Number Input Type With Pattern Attribute

<input type='tel' pattern='[+]d{2}[(]d{2}[)]d{4}[-]d{4}' title='Phone Number (Format: +99(99)9999-9999)' />
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" />