[JQUERY] 입력폼의 유효성 체크하기 두번째

입력폼에 입력되는 값의 유효성 체크하기 두번째

입력폼으로 입력되는 값들의 유효성을 체크한다.

1. 샘플예제

사용자 ID :

전화번호 :

날짜 :

- 결과화면

2. 소스코드

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

<script type="text/javascript">

$(document).ready(function(){

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

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

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

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

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

/** 사용자 아이디 유효성 체크 **/

if( chkValId( userId ) ){

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

}

else{

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

$("#errMsg_01").text("아이디는 오직 문자와 숫자, _ 기호만 입력가능");

event.preventDefault();

}

/** 사용자 전화번호 유효성 체크 **/

if( chkValPhoneNum( userPhone ) ){

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

}

else{

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

$("#errMsg_02").text("전화번호는 오직 숫자와 +, - 기호만 입력가능");

event.preventDefault();

}

/** 사용자 입력 날짜 유효성 체크 **/

if( chkValDate( userDate ) ){

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

}

else{

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

$("#errMsg_03").text("날짜는 mm/dd/yyyy 또는 mm-dd-yyyy으로만 입력가능");

event.preventDefault();

}

} );

});

var chkValId = function( id ){

var patt = new RegExp(/^[a-z0-9_]+$/);

return patt.test(id);

}

var chkValPhoneNum = function( phone ){

var patt = new RegExp(/^[0-9-+]+$/);

return patt.test(phone);

}

var chkValDate = function( date ){

var patt = new RegExp(/\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/);

return patt.test(date);

}

</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="userPhone" name="userPhone" />

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

</div>

<br/>

<div>

<span class="label">날짜 : </span><input type="text" class="infobox" id="userDate" name="userDate" />

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

</div>

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

</form>

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

3. 설명

입력값의 유효성을 RegExp() 함수를 선언하여 체크한다.

 - 사용자 아이디는 숫자와 문자, "_"기호만 입력이 되도록 체크한다.

 - 전화번호는 숫자와 "-", "+"기호만 입력되도록 체크한다.

 - 날짜는 mm/dd/yyyy 또는 mm-dd-yyyy으로만 입력되도록 체크한다.

참조 API( RegExp )

https://www.w3schools.com/js/js_regexp.asp

http://www.nextree.co.kr/p4327/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp