javascript - Invalid regular expression in HTML5 input pattern in email input -

i need use regular expression in html input (email type), used create regex here match wanted validate http://regexr.com/3gib9

regex

/^([a-z|a-z|0-9](\.|_){0,1})+[a-z|a-z|0-9]\@([a-z|a-z|0-9])+((\.){0,1}[a-z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[a-z|a-z|0-9]{2,4})?)$/gm 

pattern

^([a-z|a-z|0-9](\.|_){0,1})+[a-z|a-z|0-9]\@([a-z|a-z|0-9])+((\.){0,1}[a-z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[a-z|a-z|0-9]{2,4})?)$ 

element pattern

<input type="email" pattern="^([a-z|a-z|0-9](\.|_){0,1})+[a-z|a-z|0-9]\@([a-z|a-z|0-9])+((\.){0,1}[a-z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[a-z|a-z|0-9]{2,4})?)$" name="email" class="form-control" placeholder="email address" value="<%= session("user_email_addr") %>" required="required" title="please input valid email"> 

and getting error (invalid escape) when input email in form

pattern attribute value ^([a-z|a-z|0-9](\.|_){0,1})+[a-z|a-z|0-9]\@([a-z|a-z|0-9])+((\.){0,1}[a-z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[a-z|a-z|0-9]{2,4})?)$ not valid regular expression: uncaught syntaxerror: invalid regular expression: /^([a-z|a-z|0-9](\.|_){0,1})+[a-z|a-z|0-9]\@([a-z|a-z|0-9])+((\.){0,1}[a-z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[a-z|a-z|0-9]{2,4})?)$/: invalid escape 

how can made work?

you need remove unnecessary escaping backslashes , wrong | inside character classs, , redundant constructs:

pattern="([a-za-z0-9][._]?)+[a-za-z0-9]@[a-za-z0-9]+(\.?[a-za-z0-9]){2}\.(com?|net|org)+(\.[a-za-z0-9]{2,4})?" 

see demo below:

input:valid {    color: green;  }  input:invalid {    color: red;  }

<form name="form1">    <input pattern="([a-za-z0-9][._]?)+[a-za-z0-9]@[a-za-z0-9]+(\.?[a-za-z0-9]){2}\.(com?|net|org)+(\.[a-za-z0-9]{2,4})?" title="wrong email!"/>   <input type="submit"/>   </form>

details

• ^...$ - anchors not necessary in html5 pattern since regex anchored default (^(?: , )$ added pattern automatically when translated regex)
• [a-z|a-z|0-9] - | inside character class treated literal | symbol, not alternation operator
• (\.|_){0,1} - single char alternation makes little sense when 1 can use character class, [._] more natural construct here. besides, {0,1} more naturally written ? quantifier.
• \@ - the culprit! - char not have escaped, , can't escaped in es6 regex pattern has u modifier (this regex html5 pattern translates into, e.g. pattern="[a-z]" translated /^(?:[a-z])$/u regex)
• (com|net|org|co|org) can reduced (com?|net|org): com? matches com , co (thus, co alternative may removed) , org repeated twice.

there might other enhancements here, can use

type="email" 

html5 email validation attribute.