电子邮件正则表达式中缺少验证

Question

So, here is my code :

 <p>A form with a password field that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter:</p> <form action=""> Password: <input type="text" name="pw" pattern="[A-Za-z0-9._%+'-\\]+@[a-z0-9.-]+\\.[az]{2,4}$" required title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"> <input type="submit"> </form> <p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p> 

Why it is allowing

1. test.com
2. @text.com

I have added @ with a plus to have one or more chars before it. but it doesn't seem to work

Answer 1

You have a problem in your pattern, you are escaping the first ] char :

"[A-Za-z0-9._%+'-\]+@[a-z0-9.-]+\.[a-z]{2,4}$"
                 ^
                here

Escape \\ it using another \\ : "[A-Za-z0-9._%+'-\\\\]+@[a-z0-9.-]+\\.[az]{2,4}$" and it should work

ps : You said you cannot use type="email" bu you can see the documentation of it, there is the regex used

Answer 2

The issue is caused by the fact that [A-Za-z0-9._%+'-\\]+@[a-z0-9.-] is a single character class equal to [A-Za-z0-9._%'\\][+@.-] because you escape the ] char ending that [A-Za-z0-9._%+'-] character class prematurely.

Note it is usually enough to use type="email" to check if the input string is email. However, since you have some restrictions to use type="text" , you may use

pattern="[\w.%+'-]+@[a-z0-9.-]+\.[a-z]{2,4}"

No \\ should be before ] and you may safely remove $ at the end to only check for the end of string once (it is done automatically by HTML5).

The final pattern HTML5 engine will apply to the input will look like ^(?:[\\w.%+'-]+@[a-z0-9.-]+\\.[az]{2,4})$ :

• ^(?: - start of string and a non-capturing group
• [\\w.%+'-]+ - 1 or more letters, digits, _ , . , % , + , ' or -
• @ - a @
• [a-z0-9.-]+ - 1 or molre lowercase ASCII letters, digits, . or -
• \\. - a dot
• [az]{2,4} - 2, 3 or 4 lowercase ASCII letters
• )$ - end of group and string.