[HTML&JQUERY] 이메일 형식 입력하는 방법 & 유효성 검사 (영상 有)

안녕하세요. HTML 과 JQUERY를 이용하여 이메일 형식만 입력할 수 있는 방법과

이에 대한 유효성 검사하는 방법에 대해 알아보겠습니다.

흔히들 많이 사용하는데 할때마다 잃어버려서 따로 정리해보았습니다.

오직 이메일 형식의 숫자 및 영문만 입력됩니다.

 

---

 

아래는 구현된 이메일형식의 영상이며, 이메일형식이 틀리게 입력할 경우 경고 메세지가 나오게 됩니다.

 

 

 

 

HTML

 

INPUT 두개를 만들어 아이디와 도메인이 입력될 수 있도록하고 select박스를 이용하여 도메인 선택란을 만들어줍니다.

그리고 onclick을 이용해서 선택한 도메인이 도메인 input에 입력될 수 있도록 함수를 만들어줍니다.

<tr>
<th scope="row">이메일 <span class="em_red">*</th>
<td>
<input type="text" id="email_id" class="form_w200" value="" title="이메일 아이디" placeholder="이메일" maxlength="18" /> @ 
<input type="text" id="email_domain" class="form_w200" value="" title="이메일 도메인" placeholder="이메일 도메인" maxlength="18"/> 
<select class="select" title="이메일 도메인 주소 선택" onclick="setEmailDomain(this.value);return false;">
    <option value="">-선택-</option>
    <option value="naver.com">naver.com</option>
    <option value="gmail.com">gmail.com</option>
    <option value="hanmail.net">hanmail.net</option>
    <option value="hotmail.com">hotmail.com</option>
    <option value="korea.com">korea.com</option>
    <option value="nate.com">nate.com</option>
    <option value="yahoo.com">yahoo.com</option>
</select>
</td>
</tr>

 

 

JQUERY

 

select박스 선택할 도메인을 넣어주기 위해서,

setEmailDomain을 통해서 도메인 input 아이디인 email_domain에 value값을 넣어줍니다.

 

그다음은 이메일유효성 및 정규식입니다.

변수 email_rule 에 정규식을 넣어주고 나머지 변수에 아이디, 도메인을 넣어준 후 이를 합칠 mail변수를 넣어줍니다.

그리고 아래와 같이 유효성을 만들어주고

합칠 변수(mail)에 아이디와 도메인을 합칩니다.( mail = email_id+"@"+email_domain; )

그리고 email_rule을 test문법을 통해 값을 넣어서 정규식에 어긋나면 경고창이 뜨도록 설정합니다.

 

<script> 
  var email_rule =  /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
  var email_id =$("#email_id").val();
  var email_domain =$("#email_domain").val();
  var mail ="";
 
 
  if(!email_id){
      alert("이메일을 입력해주세요");
    $("#email_id").focus();
    return false;
  }
  if(!email_domain){
      alert("도메인을 입력해주세요");
    $("#email_domain").focus();
    return false;
  }
  mail = email_id+"@"+email_domain;
  $("#mail").val(mail);  
  
  if(!email_rule.test(mail)){
      alert("이메일을 형식에 맞게 입력해주세요.");
    return false;
  }
  
  function setEmailDomain(domain){
        $("#email_domain").val(domain);
    }
    
</script>

 

 

 

정규식과 유효성 검사를 통해 간단한 이메일 작성 기능을 구현해보았습니다!