[JS] 폼 입력값 검증

자바스크립트에서 폼 데이터를 전송시에 입력값 검증을 하는 방법이다.

보통 폼 데이터를 submit(전송, 확인 버튼)을 할 때, 검증을 수행하게 한다.

<form action="aaa.html" method="POST" onsubmit="return formChk();">

<input id='aname' type="text" name="aname">

위와 같이 form에 onsubmit 이벤트에 검사 할 함수를 추가한다.

return은 onsubmit의 리턴값으로 formChk()의 반환값을 그대로 사용하게 한다.

리턴값이 false이면 submit을 취소하게 된다. 

<script>

function formChk() {

// to do : 입력값 검증

if ( $('#aname').val()=='' ) {

alert("input data!") ;

return false ;

}

return true;

}

위와 같이 입력값을  id로 찾을때는 jquery를 사용하여 변수에 접근하면 편리하다.

순수 js를 사용하려면 name으로 element를 찾아 접근하면 된다.

document.forms[0].aname.value

또는

document.getElementByName("aname").value

입력값 검증에서 입력값을 다시 받도록 할 때는 보통 포커스를 입력필드로 이동시킨다.

변수명이 길어지므로 간단하게 함수로 파라미터를 받아 처리하기도 한다.

function formCheck(frm) {

if ( frm.aname.value=="") {

alert("이름을 입력해주세요.") ;

frm.aname.focus() ;

return false ;

}

return true ;

}

<form name="myform" onsubmit="return formCheck(this);">

이렇게 사용한다.

+폼체크에서 많이 체크하는 루틴

var fVal = frm.aname.value;

수(integer) 범위 체크

if ( parseInt(fVal) < 8   || parseInt(fVal)>10 )

빈값 체크

if ( fVal=="" )