Input 값의 미입력 및 E-mail 입력 누락 필수 체크 & 글자수 제한 > 기술자료

• 목록

1. 이메일 체크 정규식
var regExp = /^([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
설명
- 맨 앞에 있는 '/'과 끝에 있는 '/' 은 이식이 정규식임을 나타냄.
1. ^ : 문장의 처음부터 시작한다.
2. [0-9a-zA-Z_-]+ : 숫자 또는 영문자 또는 밑줄(_), 하이픈(-)이 1개이상(+)이상 와야한다.
3. ([0-9a-zA-Z_-]+) :  2에서의 형식을 한 묶음으로 한다. 시작과 끝으로 한다.
4. @ : 골뱅이가 들어가고
5. \. : . 이 들어간다.
6. {1,2} : 앞의 식이 1개 또는 2개가 연속으로 올 수 있다.
7. $ : 문장끝
var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;


2. 핸드폰번호 정규식
/^\d{3}-\d{3,4}-\d{4}$/
^01[016789]-\d{3,4}-\d{4}$/g;
var regExp = /^01[016789]-\d{3,4}-\d{4}$/g;


3. 일반 전화번호 정규식
var regExp = /^\d{2,4}-\d{3,4}-\d{4}$/;


4. 아이디나 비밀번호 정규식
 /^[a-z0-9_]{4,20}$/


# 방법1 ---
# 2006/12/12  마지막부분  input type="submit" 오류 수정
# 2012-03-22 이메일 유효성 체크 오류 수정
# 2012-05-07 이메일 체크 정규식 교체 / 전화번호 & 휴대전화 정규식 추가
# 2013-02-02 정규식 보완
# 2014-07-05 2개 이상의 radio 중 체크하도록

<script type="text/javascript">
<!--
  function input_check() {

    var f = document.hpwrite;  // 본문 form에서의 name 값으로 수정

    var agree = document.getElementsByName("agree1");
    if (!agree[0].checked) {
      alert("개인정보 수집 및 이용에 동의하셔야  서비스 이용이 가능합니다.");
      agree[0].focus();
      return false;
    }
   // 2개 이상의 radio 중 체크하도록 할때는 아래 링크 참고
   // https://www.happyjung.com/lecture/745

    var radio2 = document.getElementsByName("voteCheck");
    if (!radio2[0].checked && !radio2[1].checked && !radio2[2].checked) {
      alert("투표를 해주세요.");
      return false;
    }

    function checkEmail(email) {
     //var regExp = /^([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;   // 이메일 체크 ( id1.id2@test.com 대응불가 )
      var regExp = /^[-!#$%&'*+./0-9=?A-Z^_a-z{|}~]+@[-!#$%&'*+/0-9=?A-Z^_a-z{|}~]+.[-!#$%&'*+./0-9=?A-Z^_a-z{|}~]+$/;
      if(regExp.test(email)) { // test 는 정규 Methods 입니다. test는 변경없음
        return true;
      } else {
        return false;
      }
    }
    if(f.email.value == '') {
      alert('이메일 주소를 입력해 주십시오.');
      f.email.focus();
      return false;
    }
    else {
      if(!checkEmail(f.email.value)) {
        alert('이메일 주소를 바르게 입력해 주십시오.');
        f.email.focus();
        return false;
      }
    }

    if(f.name.value == '') {
      alert('이름을 입력해 주십시오.');
      f.name.focus();
      return false;
    }
    function checkPhone(tel) {
      var regExp = /^\d{2,4}-\d{3,4}-\d{4}$/;
      if(regExp.test(tel)) { // test 는 정규 Methods 입니다. test는 변경없음
        return true;
      } else {
        return false;
      }
    }
    if(f.tel.value == '') {
      alert('연락처를 입력해 주십시오.');
      f.tel.focus();
      return false;
    }
    else {
      if(!checkPhone(f.tel.value)) {
        alert('잘못된 전화번호입니다. 숫자, - 를 포함한 숫자만 입력하세요. 예) 050-XXXX-XXXX');
        f.tel.focus();
        return false;
      }
    }

    function checkMobile(hp) {
      var regExp = /^01[016789]-\d{3,4}-\d{4}$/;
      if(regExp.test(hp)) { // test 는 정규 Methods 입니다. test는 변경없음
        return true;
      } else {
        return false;
      }
    }
    if(f.hp.value == '') {
      alert('휴대전화를 입력해 주십시오.');
      f.hp.focus();
      return false;
    }
    else {
      if(!checkMobile(f.hp.value)) {
        alert('잘못된 휴대폰 번호입니다. 숫자, - 를 포함한 숫자만 입력하세요');
        f.hp.focus();
        return false;
      }
    }

  }
//-->
</script>
<form name="hpwrite" action="apply_ok.php" method="post" onSubmit="return input_check(this)">

    <div style="padding:15px 0 5px 5px; font-weight:bold;">■ 개인정보 수집 및 이용 동의서</div>
    <div style="border:1px solid #575757; margin:0px 5px 5px 0px; padding:5px;font-size:11px;">
        1. 개인정보를 다음의 목적을 위하여 개인정보를 처리하고,  그 목적 이외로는 이용하지 않습니다.<br>
        &nbsp;&nbsp;목적: 계약 이행을 위한 결제정보 수집<br>
        2. 개인정보 수집항목 : 이름, 이메일, 전화번호<br>
        3. 개인정보의 처리 및 보유기간 : 30일 후 삭제
    </div>
    <div style="padding:7px 0 15px 0px;">
        개인정보 수집 및 이용에 동의하십니까? &nbsp; 
        <input type="radio" name="agree1" value="1" />예 &nbsp; 
        <input type="radio" name="agree1" value="0" />아니오
    </div>

  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>이름</td>
      <td><input name="name" type="text" id="name" size="20" maxlength="20" tablindex="1"></td>
    </tr>
    <tr>
      <td>이메일</td>
      <td><input name="email" type="text" id="email" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td>전화</td>
      <td><input name="tel" type="text" id="tel" maxlength="13" value="<?php echo $_POST['tel']; ?>"></td>
    </tr>
    <tr>
      <td>휴대전화</td>
      <td><input name="hp" type="text" id="hp" maxlength="13" value="<?php echo $_POST['hp']; ?>"></td>
    </tr>
    <tr>
      <td>투표하기</td>
      <td>
        <input type="radio" name="voteCheck" value="1"<?php if ($_POST['voteCheck'] == "1") { echo " checked"; } ?>>1번 &nbsp;
        <input type="radio" name="voteCheck" value="2"<?php if ($_POST['voteCheck'] == "2") { echo " checked"; } ?>>2번 &nbsp;
        <input type="radio" name="voteCheck" value="3"<?php if ($_POST['voteCheck'] == "3") { echo " checked"; } ?>>3번
      </td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" value="신청" tablindex="5"></td>
    </tr>
  </table>
</form>


# 방법2 ---  2007/08/02  추가
---------------------------------------------------------------------------------------------
<script type="text/javascript">
<!--
  function input_check() {   
    var f = document.hpwrite;  // 본문 form에서의 name 값으로 수정
    if(f.name.value == "") {
      alert("이름을 입력하셔야 합니다.");
      f.name.focus();
      return false;
    }
    if(f.email.value == '' || f.email.value.indexOf('@') == -1) {
      alert('이메일 주소를 적지 않았거나, 옳바른 E-mail이 아닙니다.\n확인 후 입력해주세요');
      f.email.focus();
      return false;
    }
    if(f.tel1.value == "" || f.tel2.value == "" || f.tel3.value == "") {
      alert("전화번호를 적지 않았거나 빈칸이 있습니다.\n확인 후 입력해주세요");
      f.tel1.focus();
      return false;
    }
    return true;
  }
//-->
</script>

<form name="hpwrite" action="apply_ok.php" method="post" onSubmit="return input_check()">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>이름</td>
      <td><input name="name" type="text" id="name" size="20" maxlength="20"></td>
    </tr>
    <tr>
      <td>이메일</td>
      <td><input name="email" type="text" id="email" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td>전화</td>
      <td><input name="tel1" type="text" id="tel1" size="5" maxlength="4">
        - <input name="tel2" type="text" id="tel2" size="5" maxlength="4">
        - <input name="tel3" type="text" id="tel3" size="5" maxlength="4"></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" value="신청"></td>
    </tr>
  </table>
</form>


# 방법3 ---  form에서 서치버튼을 누르면 새창열기 ---  2008/05/13  추가
# 2008/05/14  새창 크기 및 위치 조절 기능 삽입
---------------------------------------------------------------------------------------------
<script type="text/javascript">
<!--
  function input_check() {   
    var f = document.hpwrite;  // 본문 form에서의 name 값으로 수정
    if(f.name.value == "") {
      alert("이름을 입력하셔야 합니다.");
      f.name.focus();
      return false;
    }
    if(f.email.value == '' || f.email.value.indexOf('@') == -1) {
      alert('이메일 주소를 적지 않았거나, 옳바른 E-mail이 아닙니다.\n확인 후 입력해주세요');
      f.email.focus();
      return false;
    }
    if(f.tel1.value == "" || f.tel2.value == "" || f.tel3.value == "") {
      alert("전화번호를 적지 않았거나 빈칸이 있습니다.\n확인 후 입력해주세요");
      f.tel1.focus();
      return false;
    }
    // 새창으로 열기 시작
    var formPop = window.open("", "popup", "width=470,height=480,top=50,left=100"); // 새창 크기 및 위치 설정
    f.target = "popup";
    f.method = "post";
    f.action = "https://www.happyjung.com";
    f.submit();
    // 새창으로 열기 끝
    return true;
  }
//-->
</script>

<form name="hpwrite" action="apply_ok.php" method="post" onSubmit="return input_check()">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>이름</td>
      <td><input name="name" type="text" id="name" size="20" maxlength="20"></td>
    </tr>
    <tr>
      <td>이메일</td>
      <td><input name="email" type="text" id="email" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td>전화</td>
      <td><input name="tel1" type="text" id="tel1" size="5" maxlength="4">
        - <input name="tel2" type="text" id="tel2" size="5" maxlength="4">
        - <input name="tel3" type="text" id="tel3" size="5" maxlength="4"></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" value="신청"></td>
    </tr>
  </table>
</form>


# 방법4   글자수 제한 ---  2008/12/15  추가
---------------------------------------------------------------------------------------------
<script>
function checkLen() {
 userid = hpwrite.userid;
 pwd = hpwrite.pwd;
 repwd = hpwrite.repwd;
 if(userid.value.length < 6 || userid.value.length > 8) {
  alert("ID가 잘못되었습니다.\n6~8자만 입력하세요!!");
  userid.select();
  return false;
 }
 else if(pwd.value.length < 6 || pwd.value.length > 8) {
  alert("PassWord가 잘못되었습니다.\n6~8자만 입력하세요!!");
  pwd.select();
  return false;
 }
 else if(repwd.value.length < 6 || repwd.value.length > 8) {
  alert("PassWord확인이 잘못되었습니다.\n6~8자만 입력하세요!!");
  repwd.select();
  return false;
 }
 return true;
}
</script>

<form name="hpwrite" action="print.asp" method="POST" onSubmit="return checkLen();">
ID : <input type="text" name="userid" size="10">
PASSWORD : <input type="password" name="pwd" size="10">
PASSWORD 확인 : <input type="password" name="repwd" size="10">
<br>
<input type="submit" value="확인">


방법> 새롭게 향상된 방법 ( 작성: 2011-05-20   /  최종수정: 2013-02-19 )
<script type="text/javascript">
<!--
function chkform(form) {
  fieldlist = [["banquet_type","연회코스"],["email","이메일"]];
  for (i=0; i < fieldlist.length; i++) {
    if (eval("hpwrite." + fieldlist[i][0] + ".value") == "") {
      alert(fieldlist[i][1] + "을 선택해주세요.");
      eval("hpwrite." + fieldlist[i][0]).focus();
      return false;
    }
  }
  return true;
}
//-->
</script>

<form name="hpwrite" method="post" action="reservation02_3.asp" onSubmit="return chkform(this)" style="padding:0; margin:0;">
이메일 <input type="text" name="email" />
연회코스 <select name="banquet_type">
  <option value="">선택하세요</option>
  <option value="1">스탠다드</option>
  <option value="2">디럭스</option>
</select>
<input type="image" src="img/btn_submit.jpg" />
</form>


[참고자료]
https://www.happyjung.com/lecture/1176
https://www.happyjung.com/lecture/745
http://skystory.kr/597