자바스크립트 - 유효성체크 예제

안녕하세요

이번 시간에는 일반적으로 홈페이지 같은 곳에서

회원가입을 할 때 아이디, 연락처, 이메일 등 다양한 정보를 적을 때

이 값들에 유효성을 체크하는 자바스크립트 예제를 올려봅니다.

위의 그림과 보시다시피 비밀번호를 입력하지 않으면 비밀번호를 입력하세요 라는 메시지가 나오거나 연락처를 문자로 입력하면 숫자로 입력하라는 등의 메시지를 체크하는 예제입니다.

폼 화면은 간단하니 직접 구현하시고

자바스크립트에서 함수 기능을 구현해봤으니 참고 하시면 되겠습니다.

function check()
{
 if(!frm.uid.value){
  alert("아이디를 입력하세요");
  frm.uid.focus(); // 입력 포커스 주기
  return;
 }
 if(!frm.upwd.value){
  alert("비밀번호를 입력하세요");
  frm.upwd.focus();
  return;
 }
 if(!frm.tel.value){
  alert("전화번호를 입력하세요");
  frm.tel.focus();
  return;
 }
 if(!frm.email.value){
  alert("이메일을 입력하세요");
  frm.email.focus();
  return;
 }
 // 아이디 4자~8자 길이 체크
 var objId=frm.ui.value;
 if(objId.length<4 objid.length="">8){
  alert("ID 길이는 4자이상 8자이내여야 합니다.");
  frm.uid.select(); // 마킹 포커스 주기
  return;
 }
 if(!isUserid(frm.uid)){
  alert("아이디는 영문자, 숫자, !, @, _여야 해요");
  frm.uid.select();
  return;
 }
 // 아이디가 알파벳, 숫자, !, @, _인지 체크
 if(!isUserid(frm.uid)){
  alert("아이디는 영문자, 숫자, !, @, _여야 해요");
  frm.uid.select();
  return;
 }
 function isUserid(obj){
  var str="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_!@";
  return containChars(obj,str); // obj는 사용자가 입력한 값, str은 id를 체크하는 유효성 값
 }
 function containChars(obj, chars){
  var val=obj.value.toUpperCase(); // 소문자를 대문자로 변환
  for(var i=0;i