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

<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>
- 결과화면