[Error : HTML] 패턴 속성 값이 올바른 정규식이 아닙니다 / Pattern attribute value is not a valid regular expression

[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}

본래 코드, 이메일 주소의 형식을 검사하기 위한 패턴이다.

 

Pattern attribute value [a-zA-Z0-9.%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,} is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /[a-zA-Z0-9.%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}/v: Invalid character in character classUnderstand this errorAI

그리고 에러 메시지. 패턴 속성 값이 올바른 정규식이 아니라는 의미였다.

---

[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}

수정된 코드, "."과 "-"의 앞에 이스케이프(\) 처리를 해줬더니 해결되었다.

 

1. "."은 특수 문자이므로, 문자 그대로의 "."을 나타내려면 이스케이프 처리를 해야한다.
2. 문자 클래스에서 ([...]) 내에서 "-"은 문자 범위를 나타내는 의미로도 사용되기에 문자 그대로의 "-"을 나타내려면 이스케이프 처리를 해야한다.