[JQUERY] 입력폼의 유효성을 체크하자

입력폼의 유효성을 체크하기

입력 폼의 유효성을 체크 한다.

1. 샘플예제

사용자 ID :

사용자 나이 :

- 결과화면

<입력폼이 모두 비어있는 경우>

<사용자의 나이값이 설정한 범위에 포함이 안되는 경우>

2. 소스코드

<%----javascript start-----------------------------------------------------%>

<script type="text/javascript">

$(document).ready(function(){

$(".error").hide();

$("#checkVal").click( function(event){

/** 사용자 아이디 체크 **/

var userId   = $("#userId").val();

var idLen    = userId.length;

if(idLen < 1){

$("#errMsg_01").show();

$("#errMsg_01").text("비어있음");

event.preventDefault();

}

else{

$("#errMsg_01").hide();

}

/** 사용자 나이 체크 **/

var userAge  = $("#userAge").val();

var ageLen   = userAge.length;

var c;

var flag = 0;

var nAge = 0;

if(ageLen < 1){

$("#errMsg_02").show();

$("#errMsg_02").text("비어있음");

event.preventDefault();

}

else{

$("#errMsg_02").hide();

}

for(var i=0; i < ageLen; i++){

c = userAge.charAt(i).charCodeAt(0);

if( c < 48 || c > 57 ){

$("#errMsg_02").show();

$("#errMsg_02").text("오직 숫자만 입력 가능");

event.preventDefault();

flag = 1;

break;

}

else{

$("#errMsg_02").hide();

}

}

if( flag == 0 ){

nAge = parseInt( userAge );

if( nAge < 5 || nAge > 99 ){

$("#errMsg_02").show();

$("#errMsg_02").text("5 ~ 99까지의 숫자만 입력 가능");

event.preventDefault();

}

}

} );

});

</script>

<%----javascript end-----------------------------------------------------%>

<%----HTML start---------------------------------------------------------%>

<form id="form1" method="post" action="">

<div>

<span class="label">사용자 ID : </span><input type="text" class="infobox" id="userId" name="userId" />

<span class="error" id="errMsg_01"></span>

</div>

<br/>

<div>

<span class="label">사용자 나이 : </span><input type="text" class="infobox" id="userAge" name="userAge" />

<span class="error" id="errMsg_02"></span>

</div>

<input class="submit" type="submit" id="checkVal" value="Submit" />

</form>

<%----HTML end-----------------------------------------------------------%>

3. 설명

1) 사용자 아이디와 나이를 입력받을 입력폼을 생성한다.

2) submit 버튼을 클릭하면 실행될 유효값 체크 이벤트를 생성한다.

  : 사용자 아이디 폼은 입력 여부 판단.

  : 사용자 나이 폼은 입력 여부 판단 및 숫자만 입력되어있는지 확인, 5~99까지의 숫자만 입력 여부 판단.

- val()

  : 해당 엘리먼트의 입력값을 가져오거나 설정한다.

- text()

  : 해당 엘리먼트의 텍스트를 가져오거나 설정한다.

JUQERYAPI

val() : http://api.jquery.com/val/

text() : http://api.jquery.com/text/