HTML에서 이메일 유효성 체크하기 (HTML5)

이메일 유효성 체크는 자바스크립트로 많이 해왔다 ( 특히 정규표현식을 이용해서 )

이건 다음 포스팅에서 다뤄보기로 하고,

이번 포스팅에서는 편하게 이메일 유효성 체크하는 법을 알아보기로 한다.

 

아래의 코드를 보도록 하자.

<form>
    <input type="email" name="dest" required autofocus/>
    <input type="submit">
</form>

 

인터넷을 찾아봤는데

input 태그의 type속성에 email만 줘도 체크를 한다는데 내껀 안한다.

HTML5 속성을 찾아보니 required가 있는데 이 속성을 줘야만 제대로 유효성 검증을 한다.

또한 required 속성은 어느 input 태그에서나 사용할 수 있다.

 

당연한 말이겠지만 submit과 함께 form에 속해있지 않으면 체크가 안된다.

 

input type="email", required 속성을 주면 유효성 체크를 한다!

 

아래는 결과값이다.

 

값을 입력 안했을 경우

값을 입력했는데 @가 없을 경우