How can I extend a regex pattern to prevent certain characters in the beginning and in the end?

Question

I am looking for a basic email validation using HTML5 pattern. So far I have the following but I am struggling with the required rules below, esp. rules 1 and 3.

Conditions:

1. I only need to cover email addresses containing **letters (a-zA-Z), digits (0-9), underscores (_), dots / periods (.), dashes (-).
2. I only need to cover standard business email addresses such as firstname.lastname@domain.com, firstname.lastname@domain.co.uk, firstname.lastname@domain.de, firstname-secondname.lastname@domainPart1-domainPart2.de.
3. No need to cover Asian or Arabic characters and no need to cover characters not listed here.
4. No need to cover emails not containing dot / period.

Required rules:

1. First character cannot be underscore, dot / period or dash.
2. Last character cannot be underscore, dot / period or dash.
3. Cannot contain two dots / periods in a row.
4. Cannot contain spaces (also not as first or last character).

My approach (not working):

<input type="email" id="email" minlength="10" pattern="^(?!^\.\_\-)(?!.*[-_.]$)[a-zA-Z0-9\.\_\-]+$" required autocomplete="off">

Can someone show me how to do this right and also provide an explanation on the single parts?

Answer 1

You can use this:

pattern="^\w+(?:[.-]\w+)*@\w+(?:[.-]\w+)*(?:\.[a-zA-Z]{2,})+$"

Explanation:

• ^ - anchor at start
• \w+ - 1+ word chars (a-z, A-Z, _)
• (?:[.-]\w+)* - optional (0+) non-capture group of: dot or dash, followed by 1+ word chars
• @ - a literal @
• \w+ - 1+ word chars
• (?:[.-]\w+)* - optional (0+) non-capture group of: dot or dash, followed by 1+ word chars
• (?:\.+[a-zA-Z]{2,})+ - required (1+) non-capture group of: dot, followed by 2+ alpha chars (for TLD)
• $ - anchor at end

Please consider supporting a +label sequence just before the @ sign. Many people use that to bucketize email:

pattern="^\w+(?:[.-]\w+)*(?:\+[\w.-])?@\w+(?:[.-]\w+)*(?:\.+[a-zA-Z]{2,})+$"

Here is a working example. The jQuery code is not needed in HTML5, added here because the code snippet does not seem to support it. The jQuery code adds a red border if the email is not valid. In an HTML5 environment, the input text is red if the email is not valid.

$('#email').on('input', function(e) {
  let pattern = $(this).attr('pattern');
  let val = $(this).val();
  let regex = new RegExp(pattern);
  if(regex.test(val)) {
    $(this).removeClass('red-border');
  } else {
    $(this).addClass('red-border');
  }
});

.red-border {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
Email:
    <input type="email" id="email" pattern="^\w+(?:[.-]\w+)*@\w+(?:[.-]\w+)*(?:\.[a-zA-Z]{2,})+$" required autocomplete="off">