HTML5 Email Input Pattern Attribute

Question

I’m trying to make a html5 form that contains one email input, one check box input, and one submit input. I\'m trying to use the pattern attribute for the email input but I

Answer 1

This is the approach I'm using and you can modify it based on your needs:

^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$

Explanation:

1. We want to make sure that the e-mail address always starts with a word:

   ^[\w]

A word is any character, digit or underscore. You can use [a-zA-Z0-9_] pattern, but it will give you the same result and it's longer.

2. Next, we want to make sure that there is at least one such character:

   ^[\w]{1,}

3. Next, we want to allow any word, digit or special characters in the name. This way, we can be sure that the e-mail won't start with the dot, but can contain the dot on other than the first position:

   ^[\w]{1,}[\w.+-]

4. And of course, there doesn't have to be any of such character because e-mail address can have only one letter followed by @:

   ^[\w]{1,}[\w.+-]{0,}

5. Next, we need the @ character which is mandatory, but there can be only one in the whole e-mail:

   ^[\w]{1,}[\w.+-]{0,}@

6. Right behind the @ character, we want the domain name. Here, you can define how many characters you want as minimum and from which range of characters. I'd go for all word characters including the hyphen [\w-] and I want at least two of them {2,}. If you want to allow domains like t.co, you would have to allow one character from this range {1,}:

   ^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}

7. Next, we need to deal with two cases. Either there's just the domain name followed by the domain extension, or there's subdomain name followed by the domain name followed by the extension, for example, abc.com versus abc.co.uk. To make this work, we need to use the (a|b) token where a stands for the first case, b stands for the second case and | stands for logical OR. In the first case, we will deal with just the domain extension, but since it will be always there no matter the case, we can safely add it to both cases:

   ^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][a-zA-Z]{2,})

This pattern says that we need exactly one dot character followed by letters, no digits, and we want at least two of them, in both cases.

8. For the second case, we will add the domain name in front of the domain extension, thus making the original domain name a subdomain:

   ^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})

The domain name can consist of word characters including the hyphen and again, we want at least two characters here.

9. Finally, we need to mark the end of the whole pattern:

   ^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$

10. Go here and test if your e-mail matches the pattern: https://regex101.com/r/374XLJ/1

Answer 2

The following regex pattern should work with most emails, including russian emails.

[^@]+@[^\.]+\..+

Answer 3

I used following Regex to satisfy for following emails.

abc@example.com # Minimum three characters
ABC.xyz@example.com # Accepts Caps as well.
abce.xyz@example.co.in # Accepts . before @

Code

<input type="email" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" />

Answer 4

<input type="email" pattern="^[^ ]+@[^ ]+\.[a-z]{2,6}$">

Demo - Test the email input

Answer 5

One more solution that is built on top of w3org specification.
Original regex is taken from w3org.
The last "* Lazy quantifier" in this regex was replaced with "+ One or more quantifier".
Such a pattern fully complies with the specification, with one exception: it does not allow top level domain addresses such as "foo@com"

<input
    type="email" 
    pattern="[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+"
    title="valid@email.com"
    placeholder="valid@mail.com"
    required>

Answer 6

pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}"

<input type="email"  class="form-control" id="driver_email" placeholder="Enter Driver Email" name="driver_email" pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}" required="">