HTML5 양식 유효성 검사에서 점이없는 이메일을 허용하는 이유는 무엇입니까?

HTML5 양식 유효성 검사를 보여주기 위해 매우 간단한 모형을 작성하고 있습니다. 그러나 이메일 유효성 검사는 주소의 점을 확인하지 않으며 해당 점 다음에 오는 문자도 확인하지 않습니다.

즉, "john @ doe"는 유효한 이메일 주소가 아닌 경우 유효한 것으로 간주됩니다. "doe"는 도메인이 아닙니다.

이것이 내 이메일 필드를 코딩하는 방법입니다.

<input type="email" required />

충분하지 않습니까?

이 바이올린 을 확인하여 내가 의미하는 바를 확인하십시오 .

참고 : 대신 RegEx 패턴을 통해이를 수행하는 방법을 알고 있습니다. 나는 누군가가 대신 이메일 유형을 사용하여 어떻게 벗어날 수 있는지 궁금합니다.

a @ b는 유효한 이메일 주소이기 때문입니다 (예 : localhost는 유효한 도메인 임). http://en.wikipedia.org/wiki/Email_address#Examples 참조

또한 항상 서버에서 입력 유효성 검사를 수행해야합니다. 클라이언트 측 유효성 검사는 사용자에게 피드백을 제공하는 용도로만 사용해야하며 쉽게 우회 할 수 있으므로 신뢰할 수 없습니다.

이론적으로 "."없이 주소를 가질 수 있습니다. 에.

기술적으로 다음과 같은 것 이후 :

user@com
user@localserver
user@[IPv6:2001:db8::1]

모두 유효한 이메일입니다.

따라서 표준 HTML5 유효성 검사는 흔하지 않은 이메일을 포함하여 모든 유효한 이메일을 허용합니다.

읽기 쉬운 설명 (표준을 읽는 대신) : http://en.wikipedia.org/wiki/Email_address#Examples

이것을 입력에 추가하십시오

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$"

깡깡이

RFC (822) , 제 6 장 증강 배 커스 - 나 우어 형식 (BNF)의 어드레스의 지정을 제공한다 :

addr-spec   =  local-part "@" domain
local-part  =  word *("." word)
domain      =  sub-domain *("." sub-domain)

이 사양을 사용 a@b하는 것은 유효한 주소입니다.

최신 정보

Trejkaz의 의견에 답하기 위해 다음 정의를 추가합니다. SPACE가 허용되지만 따옴표로 묶인 문자열로만 표시됩니다.

word          =  atom / quoted-string
atom          =  1*<any CHAR except specials, SPACE and CTLs>
quoted-string = <"> *(qtext/quoted-pair) <">
SPACE         =  <ASCII SP, space>
CTL           =  <any ASCII control character and DEL> 
qtext         =  <any CHAR excepting <">, "\" & CR, and including linear-white-space>
quoted-pair   =  "\" CHAR  

이 MDN 페이지에는 정규식 브라우저가 이메일을 확인하는 데 사용해야하는 정규식이 표시됩니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#Validation

도메인 이름에 점이 하나 이상 필요하도록이 정규식을 약간 변경할 수 있습니다 . *정규식 끝에 있는 별표 를 플러스로 변경 +합니다. 그런 다음 해당 정규식을 pattern속성으로 사용하십시오.

<input type="email" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$"></input>

이메일 필드의 패턴을 사용자 정의 할 수 있습니다.

input:valid {
  border-color: green
}

input:invalid {
  border-color: red
}

Email:
<input type="email" required value="a@b.c" /><br>

Non-dots Email:
<input type="email" required pattern="[^.]+@[^.]+" value="a@b.c" />

정규식 패턴을 사용하여 html5로 수행하는 방법은 다음과 같습니다. 표시 할 사용자 지정 메시지를 포함 할 수도 있습니다.

<form>
  <input type="email" value="paul@test" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$" title="Hey, you are missing domain part in the email !!!"/>
  <button type="submit">Click Me</button>
</form>

이 패턴은 항상 저에게 효과적입니다.

텍스트는 소문자 여야 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"하지만 대부분의 이메일을 다룬다 고 생각합니다.