[Vuejs]-Regex Behaves Differently on HTML Pattern than on an Express Backend

2👍

Probably not the answer you are after (not vue.js specific)…

Email address input validation should usually be completed like so:

<input type="email" name="" value="" required />

Specifying the correct "type" to an input field also adjusts input keyboards on mobile devices to make inputting an email address easier.


Your regular expression is poorly written and leads to "catastrophic backtracking" as well as not actually supporting valid email addresses.

Email address validation is generally complex, see this answer and associated question:
https://stackoverflow.com/a/201378/406712


You can also find the HTML email address validation equivalent regular expression in the HTML spec:
https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address


Also note you failed to escape the characters in the string, the first instance being the \w which without escaping the \ will appear as simply w.

Escaped the string it more like this:

'/^\\w+([.-]?\\w+)@\\w+([.-]?\\w+)(.\\w{2,4})+$/'

Leave a comment