form 정규식에 맞춰 작성하기

form 회원가입

[html 코드]

<body>
  <form name="form" method="post" onsubmit="return checkAll()">
    <table width="750" border="1px" align="center">
      <tr>
        <th colspan="2" bgcolor="#e4f7ba">회원 기본 정보</th>
      </tr>
      <tr>
      	<td>아이디</td>
        <td><input type="text" name="userId">4~12자의 영문 대소문자와 숫자로만 입력</td>
      </tr>
      <tr>
      	<td>비밀번호</td>
        <td><input type="password" name="password1">4~12자의 영문 대소문자와 숫자로만 입력</td>
      </tr>
      <tr>
        <td>비밀번호 확인</td>
        <td><input type="password" name="password2"></td>
      </tr>
      <tr>
      	<td>메일주소</td>
        <td><input type="text" name="mail">예) id@domain.com</td>
      </tr>
      <tr>
        <td>이름</td>
        <td><input type="text" name="name"></td>
      </tr>
      <tr>
      	<td>주민등록번호</td>
        <td>
          <input type="text" name="identi1" style="width: 70px"> - 
          <input tpye="password" name="identi2" style="width: 70px">
        </td>
      </tr>
      <tr>
      	<td>관심분야</td>
        <td>
          <input type="checkbox" name="favorite" value="컴퓨터">컴퓨터
          <input type="checkbox" name="favorite" value="인터넷">인터넷
          <input type="checkbox" name="favorite" value="여행">여행
          <input type="checkbox" name="favorite" value="영화">영화
          <input type="checkbox" name="favorite" value="음악">음악
        </td>
      </tr>
      <tr>
      	<td>자기소개</td>
        <td><textarea name="introduceMyself" id="intro" col="50" row="10"></textarea></td>
      </tr>
    </table>
    <p align="center">
     <input type="submit" name="join" value="회원 가입" />
     <input type="reset" name="reset" value="다시 입력" />
    </p>
  </form>
</body>

<form name="form" method="post" onsubmit="return checkAll()">

submit 버튼을 누르면 script의 checkAll() 가 호출된다.

[JavaScript 코드]

function checkAll() {
  if(!checkUserId(form.userId.value)) {
    return false;
  } else if (!checkPassword(form.userId.value, form.password1.value, form.password2.value)) {
    return false;
  } else if (!checkMail(form.mail.value)) {
    return false;
  } else if (!checkName(form.name.value)) {
    return false;
  } else if (!checkBirth(form.identi1.value, form.identi2.value)) {
    return false;
  } else if (!checkFavorite()) {
    return false;
  } else if (!checkIntro()) {
    return false;
  }
  return true;
}

조건문을 보면 checkUserId함수에서 폼에 입력된 값이 유효성 검사에 맞으면 true를 return 해준다.

따라서 if조건문 내로 들어가지 않으므로 다음 조건문을 실행하게 된다.

아래의 else if문도 마찬가지로 똑같이 수행한다.

함수의 매개변수로는 form 내에 해당되는 input태그의 id값을 가져온다.

[공백함수 확인]

// 공백함수 확인
function checkExistData(value, dataName) {
  if(value == '') {
    alert(dataName + ' 입력해주세요.');
    return false;
  }
  return true;
}

checkAll함수를 제외한 모든 함수에 첫번째로 들어가 있는 코드가 공백확인함수이다.

유효성 검사를 하면서 값이 공백이라면 "영문 대소문자와 숫자 4~12자리로 입력해야 합니다."라고 출력해도 되지만 공백임을 알려주기 위해 따로 함수를 빼낸다.

매개변수로 들어오는 value는 input태그의 값이고 dataName은 해당되는 input 태그의 종류가 무엇인지 알려주는 string 변수이다.

값이 공백일 경우, alert를 통해 사용자에게 공백임을 알리고 false 를 return 하면서 이 함수를 호출한 함수를 끝낸다.

[유효성 검사 함수]

id를 검사하는 함수checkuserId함수의 매개변수(id)로 넘어오는 값은 input 태그에 들어가는 값이다. (form.userId.value)checkExistData함수는 공백확인 함수이다.4라인 return false를 해주면서 checkAll함수 2번 3번 라인에서 script가 끝난다./ :: 자바스크립트의 정규표현식의 처음과 끝을 의미.^ :: 문장의 처음을 뜻한다.{ } :: 문자열 길이를 뜻한다. 예를 들면 {4,12}일 경우 최소길이 4, 최대길이 12이다. /^[a-zA-z0-9]{4,12}$/ 를 분석하면, 영문 대/소문자, 숫자만 사용가능, 길이는 최소 4, 최대 12를 만족해야 하는 정규표현식이다.
$ :: 문장의 마지막을 뜻한다.
[ ] :: 문자셋이다. 예를 들면 [a-z]라고 적을 경우 정규표현식에 만족하는 값들은 반드시 a~z사이의 값만 넣을 수 있다.
이어서 아이디 유효성을 검사하는 정규표현식(Regular Expression)이다.
만약 id의 값이 공백일 경우, checkExistData함수에서 false를 return해주므로 !에 의해 if조건문은 true가 된다.
function checkUserId(id) { // id가 입력되었는지 확인 if(!checkExistData(id, '아이디를')) return false; // id 유효성 검사 var idRegExp = /^[a-zA-z0-9]{4,12}$/; if(!idRegExp.test(id)) { alert('아이디는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다.'); form.userId.value = ''; form.userId.focus(); return false; } return true; // 확인이 완료되었을 때. }

if 조건문에서 test는 정규표현식과 id의 값이 일치하는지 아닌지 확인하는 함수이다.

일치하면 true, 일치하지 않으면 false를 return 한다. 만약 일치하지 않을 경우 사용자에게 해당조건을 알려주는 알림창을 띄워준다. 그리고 폼에 입력된 값을 공백을 초기화하고 포커스를 맞춰준다.

정규표현식과 id의 값이 같을 경우 return true를 하고 다음 함수를 실행한다.

비밀번호 검사 함수비밀번호가 만족해야 할 조건은,
1. 영문 대/소문자와 숫자 4~12자리로 입력할 것.
2. 비밀번호 두 번 입력했을 때 두번 다 일치할 것.
3. 아이디와 비밀번호는 불일치 할 것.
checkPassword함수는 매개변수로 id와 두개로 입력된 password를 받는다.
function checkPassword(id, password1, password2) { // 비밀번호가 입력되었는지 확인. if(!checkExistData(password1, '비밀번호를')) return false; // 비밀번호 확인이 입력되었는지 확인. if(!checkExistData(password2, '비밀번호 확인을')) return false; // 비밀번호 유효성검사 var password1RegExp = /$^[a-zA-z0-9]{4,12}$/; if(!password1RegExp.test(password1)) { alert('비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다.'); form.password1.value = ''; form.password1.focus(); return false; } // 비밀번호와 비밀번호 확인이 맞지 않다면, if(password1 != password2) { alert('두 비밀번호가 맞지 않습니다.'); form.password1.value = ''; form.password2.value = ''; form.password2.focus(); return false; } // 아이디와 비밀번호가 같을 때, if (id === password1) { alert('아이디와 비밀번호는 같을 수 없습니다.'); form.password1.value = ''; form.password2.value = ''; form.password2.focus(); return false; } return true; // 확인이 완료되었을 때 }

두 번의 비밀번호가 다를 경우 사용자에게 두 비밀번호가 일치하지 않음을 알려준다. 그리고 두 비밀번호 입력창을 공백으로 설정해준 다음 포커스를 두 번째 비밀번호 입력창에 준다. 마지막으로 return false.

이메일을 검사하는 함수이메일 정규표현식을 보면 ^[A-Za-z0-9]+[A-Za-z0-9] :: 이메일의 경우 첫글자 _가 혀용되므로 첫번째 글자 검사식을 따로 둔다. 그 뒤 영문 대/소문자 숫자만 사용할 수 있게 조건을 건다. *[@]{1} :: @는 반드시 하나만 입력.[A-Za-z]{1,3} :: 최소 한글자 최대 세글자까지 입력 가능.
*[.]{1} :: .은 반드시 하나만 입력.
function checkMail(mail) { // mail이 입력되었는지 확인. if(!checkExistData(mail, '이메일을')) return false; var emailRegExp = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/; if(!emailRegExp.test(mail)) { alert('이메일 형식이 올바르지 않습니다.'); form.mail.value = ''; form.mail.focus(); return false; } return true; // 확인이 완료되었을 때 }

이메일 값이 정규표현식에 만족할 경우 return true.

이름 검사 함수
function checkName(name) { if(!checkExistData(name, '이름을')) return false; var nameExpReg = /^[가-힣]{2,4}$/; if(!nameRegExp.test(name)) { alert('이름이 올바르지 않습니다.'); return false; } return true; }
주민등록번호 검사함수매개변수가 두개인 이유는 폼에서 주민번호 입력창이 두개가 있기 때문.for조건식에서 유효성 검사를 위해 totalIdenti 값을 identiArr배열에 하나하나 입력해준다.

1 2 3 4 5 6 - 1 2 3 4 5 6 7

x 2 3 4 5 6 7 8 9 2 3 4 5
배열에 입력하면서 sum값을 바로 계산해준다.
이 때문에 totalIdenti라는 변수에 문자열 결합해준다.
function checkBirth(identi1, identi2) { // birth 입력확인. if(!checkExistData(identi1, '주민등록번호를' || !checkExistData(identi2, '주민등록번호를'))) return false; var totalIdenti = '' + identi1 + identi2; var identiArr = new Array(); var sum = 0; var plus = 2; // 배열에 주민등록번호 입력 후 유효값 확인위해 sum에 저장 for(var i = 0; i < 12; i++) { identiArr[i] = totalIdenti.charAt(i); if(i >= 0 && i <= 7) { sum += totalIdenti[i] * plus; plus++; if(i == 7) plus = 2; } else { sum += totalIdenti[i] * plus; plus++; } } // 주민등록번호 길이 확인 if(identiArr.length < 12) { alert('주민등록번호는 13자리입니다.'); form.identi1,value = ''; form.identi2.value = ''; form.identi1.focus(); return false; } // 주민등록번호 유효한지 확인 var result = 11 - (sum % 11) % 10; if(result != totalIdenti.charAt(12)) { alert('유효하지않은 주민번호입니다.'); form.identi1.value = ''; form.identi2.value = ''; form.identi1.focus(); return false; } return true; }

	1	2	3	4	5	6	-	1	2	3	4	5	6	7
x	2	3	4	5	6	7		8	9	2	3	4	5

위의 주민등록번호 유효성 검사표를 보면 1번째부터 8번째 자리까지 2부터 순차적으로 값이 올라가면서 곱해지다가 9번째 자리부터는 다시 2로 돌아간다.

관심분야에서 하나 이상 체크되었는지 확인하는 함수document.getElementsByName('favorite')는 HTML에서 같은 name('favorite')으로 묶인 checkbox의 값을 배열로 가져온다.
for문에서 체크된 값이 하나라도 있을 경우 바로 true를 return 시켜줌으로써 함수를 끝낸다. for무넹서 return 되지 않는다면 체크된 값이 하나라도 되지 않는 경우이므로 알림창을 띄워주고 return false 해준다.
function checkFavorite() { var checkedFavorite = document.getElementsByName('favorite'); // 체크된 값이 하나라도 있을 경우 바로 true for(var i = 0; i < checkedFavorite.length; i++) { if(checkedFavorite[i].checked == true) { return true; } } alert('관심분야를 체크해주세요.'); return false; }
자기소개서 항목에 값이 들어있는지 확인하는 함수
function checkIntro() { var text = document.getElementById('intro'); if(!checkExistData(text.value, '자기소개를')) { alert('자기소개를 입력해주세요.'); return false; } else { return true; } }

전체적인 JavaScript 코드이다.

function checkAll() {
  if(!checkUserId(form.useId.value)) {
    return false;
  } else if (!checkPassword(form.userId.value, form.password1.value, form.password2.value)) {
    return false;
  } else if (!checkMail(form.mail.value)) {
    return false;
  } else if (!checkName(form.name.value)) {
    return false;
  } else if (!checkBirth(form.identi1.value, form.identi2.value)) {
    return false;
  } else if (!checkFavorite()) {
    return false;
  } else if (!checkIntro()) {
    return false;
  }
  return true;
}

// 공백함수 확인
function checkExistData(value, dataName) {
  if(value == '') {
    alert(dataName + ' 입력해주세요.');
    return false;
  }
  return true;
}

function checkUserId(id) {
  // id가 입력되었는지 확인
  if(!checkExistData(id, '아이디를'))
    return false;
  
  // id 유효성 검사
  var idRegExp = /^[a-zA-z0-9]{4,12}$/;
  if(!idRegExp.test(id)) {
    alert('아이디는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다.');
    form.userId.value = '';
    form.userId.focus();
    return false;
  }
  return true; // 확인이 완료되었을 때.
}

function checkPassword(id, password1, password2) {
  // 비밀번호가 입력되었는지 확인.
  if(!checkExistData(password1, '비밀번호를'))
    return false;
  // 비밀번호 확인이 입력되었는지 확인.
  if(!checkExistData(password2, '비밀번호 확인을'))
    return false;
  
	// 비밀번호 유효성검사
  var password1RegExp = /$^[a-zA-z0-9]{4,12}$/;
  if(!password1RegExp.test(password1)) {
    alert('비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다.');
    form.password1.value = '';
    form.password1.focus();
    return false;
  }
  // 비밀번호와 비밀번호 확인이 맞지 않다면,
  if(password1 != password2) {
    alert('두 비밀번호가 맞지 않습니다.');
    form.password1.value = '';
    form.password2.value = '';
    form.password2.focus();
    return false;
  }
  
  // 아이디와 비밀번호가 같을 때,
  if (id === password1) {
    alert('아이디와 비밀번호는 같을 수 없습니다.');
    form.password1.value = '';
    form.password2.value = '';
    form.password2.focus();
    return false;
  } 
  return true; // 확인이 완료되었을 때
}

function checkMail(mail) {
  // mail이 입력되었는지 확인.
  if(!checkExistData(mail, '이메일을'))
    return false;
  
  var emailRegExp = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;
  if(!emailRegExp.test(mail)) {
    alert('이메일 형식이 올바르지 않습니다.');
    form.mail.value = '';
    form.mail.focus();
    return false;
  }
  return true; // 확인이 완료되었을 때
}

function checkName(name) {
  if(!checkExistData(name, '이름을'))
    return false;
  
  var nameExpReg = /^[가-힣]{2,4}$/;
  if(!nameRegExp.test(name)) {
    alert('이름이 올바르지 않습니다.');
    return false;
  }
  return true;
}

function checkBirth(identi1, identi2) {
  // birth 입력확인.
  if(!checkExistData(identi1, '주민등록번호를' || !checkExistData(identi2, '주민등록번호를')))
    return false;
  
  var totalIdenti = '' + identi1 + identi2;
  
  var identiArr = new Array();
  var sum = 0;
  var plus = 2;
  
  // 배열에 주민등록번호 입력 후 유효값 확인위해 sum에 저장
  for(var i = 0; i < 12; i++) {
    identiArr[i] = totalIdenti.charAt(i);
    if(i >= 0 && i <= 7) {
      sum += totalIdenti[i] * plus;
      plus++;
      if(i == 7) plus = 2;
	  } else {
  	  sum += totalIdenti[i] * plus;
    	plus++;
  	}
  }
  
  // 주민등록번호 길이 확인
  if(identiArr.length < 12) {
    alert('주민등록번호는 13자리입니다.');
    form.identi1,value = '';
    form.identi2.value = '';
    form.identi1.focus();
    return false;
  }
  
  // 주민등록번호 유효한지 확인
  var result = 11 - (sum % 11) % 10;
  if(result != totalIdenti.charAt(12)) {
    alert('유효하지않은 주민번호입니다.');
    form.identi1.value = '';
    form.identi2.value = '';
    form.identi1.focus();
    return false;
  }
  return true;
}

function checkFavorite() {
  var checkedFavorite = document.getElementsByName('favorite');
  
  // 체크된 값이 하나라도 있을 경우 바로 true
  for(var i = 0; i < checkedFavorite.length; i++) {
    if(checkedFavorite[i].checked == true) {
      return true;
    }
  }
  alert('관심분야를 체크해주세요.');
  return false;
}

function checkIntro() {
  var text = document.getElementById('intro');
  if(!checkExistData(text.value, '자기소개를')) {
    alert('자기소개를 입력해주세요.');
    return false;
  } else {
    return true;
  }
}

[form] form 정규식에맞춰작성하기

form 정규식에 맞춰 작성하기

form 회원가입

티스토리툴바