정규식을 이용한 폼 체크

<SCRIPT LANGUAGE="JavaScript">
<!--
// 자바스크립트 trim 공백제거함수
function trim(str) { 
	str = str.replace(/\s/g,''); 
	return str;
} 	
// 형식 체크
function chkPatten(field,pattern,form_title){

var pattern_name = pattern;//regNum
		pattern=eval(pattern);//^[0-9]+$
	var form_name=eval("check_form."+field)

if(!pattern.test(form_name.value)){
//            alert("[" + form_title + "] 항목의 형식이 올바르지 않습니다."+getPatternEx(pattern_name));
           msg.style.visibility = "visible";
           msg.innerHTML="[" + form_title + "] 항목의 형식이 올바르지 않습니다."+getPatternEx(pattern_name)
			form_name.style.background = "yellow";//
			form_name.value="";
//			form_name.focus();
			return false;
       }else{
			msg.style.visibility = "hidden";
			form_name.style.background = "white";//
	   }
       return true;
}

function getPatternEx(pattern_name){
	var exText = "";

switch(pattern_name){
		case "regNum":
			exText = "123456";
			break;
        case "regPhone":
            exText = "000-0000-0000";
            break;
        case "regMail":
            exText = "user_id@domain.com";
            break;
        case "regDomain":
            exText = "domain.com";
            break;
		case "regAlpha":
			exText = "abc...xyz";
			break;
        case "regHost":
            exText = "abc...xyz";
            break;
        case "regHangul":
            exText = "한글123";
            break;
        case "regHangulEng":
            exText = "한글ABC";
            break;
		case "regHangulOnly":
			exText = "한글만";
			break;
        case "regId":
            exText = "id123";
            break;
        case "regDate":
            exText = "2100-09-08";
            break;
		default :
			exText = "Type";
			break;
    }
    if(exText)
		{exText = "\n\n다음 형식으로 입력하여 주시기 바랍니다.\n\n [ "+exText+" ]";}
    return exText;
}

//-->
</SCRIPT>

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>

<table width="550" border="1" cellspacing="0" cellpadding="0">
   <tr>
     <td width="400">
<p>숫자만
     <input type="text" name="onlyNum" title="숫자만" onBlur="chkPatten(this.name,'regNum',this.title)">
  </p>
   <p>전화번호
     <input type="text" name="phone" title="전화번호" onBlur="chkPatten(this.name,'regPhone',this.title)">
</p>
   <p>메일
     <input type="text" name="email" title="이메일" onBlur="chkPatten(this.name,'regMail',this.title)">
   </p>
   <p>도메인
     <input type="text" name="domain" title="도메인" onBlur="chkPatten(this.name,'regDomain',this.title)">
   </p>
   <p>영문
     <input type="text" name="onlyEng" title="영문만" onBlur="chkPatten(this.name,'regAlpha',this.title)">
   </p>
   <p>한글과숫자
     <input type="text" name="hangulNum" title="한글과숫자" onBlur="chkPatten(this.name,'regHangul',this.title)">
   </p>
   <p>한글과영문
     <input type="text" name="hangulEng" title="한글과영문" onBlur="chkPatten(this.name,'regHangulEng',this.title)">
   </p>
   <p>한글만
     <input type="text" name="onlyHan" title="한글만" onBlur="chkPatten(this.name,'regHangulOnly',this.title)">
   </p>
   <p>아이디
     <input type="text" name="userid" title="아이디" onBlur="chkPatten(this.name,'regId',this.title)">
   </p>
   <p>날짜
     <input type="text" name="userdate" title="날짜" onBlur="chkPatten(this.name,'regDate',this.title)">
   </p>
   <p>
     <input name="작성완료" type="button" title="작성완료" onClick="chkPatten()" value="button">
   </p>

</td>
     <td width="150"><div id="msg"></div></td>
   </tr>
 </table>
   
 </form>
</BODY>
</HTML>

중간쯤 보시면

// form_name.focus();

를 주석 처리 하였습니다.

주석을 해제하게 되면

첫번째 인풋박스를 올바르게 입력하지 않고

두번째 인풋박스로 탭키를 눌러서 넘어가면 양쪽 모두 포커스가 먹어서 락이 발생합니다.

포커스 주는 것은 좀더 고민을 해봐야 할듯 합니다. ^^

정규식폼체크.html

Change Agent(변화변혁 주도자)

정규식을 이용한 폼 체크

티스토리툴바

정규식을 이용한 폼 체크

관련글

티스토리툴바