[프로젝트] MyBatis 회원가입, 유효성 검사하기

    더보기

    #Jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    		 pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>joinform</title>
    
    	<meta name="viewport"
    		  content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    	<!-- Bootstrap CSS -->
    	<link rel="stylesheet"
    		  href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    		  integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
    		  crossorigin="anonymous">
    
    	<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    			integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    			crossorigin="anonymous"></script>
    	<script
    			src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
    			integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
    			crossorigin="anonymous"></script>
    
    	<!-- 이미지 파일 -->
    	<script src="https://kit.fontawesome.com/45fba14eff.js"
    			crossorigin="anonymous"></script>
    
    	<style>
    		#form-input-id, #form-input-password01, #form-input-password02, #form-input-name {
    			width: 350px;
    			margin-left: 10px;
    			margin-right: 10px;
    		}
    
    		#inlineFormCustomSelectPref, #mollangtest, #mollangtest1, #mollangtest2 ,
    		#mollangtest3, #mollangtest4, #mollangtest5 , #mollangtest6, #mollangtest7, #mollangtest8,
    		#mollangtest9, #mollangtest10, #mollangtest11 {
    			width: 150px;
    			height: 35px;
    		}
    
    		#inlineFormCustomSelectPrefMBTI {
    			width: 220px;
    		}
    
    		#BUTTONMO {
    			width: 130px;
    			height: 40px;
    		}
    
    		#alertsize {
    			padding: 8px 10px;
    			width: 150px;
    			height: 40px;
    			margin-right: 10px;
    			text-align: center;
    		}
    
    		#alertsizeinput {
    			padding: 8px 10px;
    			width: 150px;
    			height: 40px;
    		}
    	</style>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body style="margin-left: 5%; padding-right: 8%" onload="start()">
    
    <!-- content view -->
    <div class="container">
    	<!-- 맨위에 가운데 배치되는게 아래로 -->
    	<div class="card shadow">
    		<div class="card-body">
    			<h2 class="#">회원 가입</h2>
    			<!-- 즐찾과 같은높이로 설정 -->
    			<div class="row" style="width: 100%">
    				<div style="width: 64%; float: none; margin: 20px auto">
    					<form action="postjoin" method="post" name="insertjoin">
    						<div class="form-group row ">
    							<div class="alert alert-secondary text-center" role="alert"
    								 id="alertsizeinput">아이디
    							</div>
    							<input type="text" class="form-control" id="form-input-id" name="user_Id"
    								   style="margin-left: 10px" placeholder="4~15자리까지 입력해주세요" oninput="user_form_id()">
    							<!-- 중복 되었을 경우 버튼 변경 -->
    							<div id="check_id_mollang">
    								<button type="button" class="btn btn-secondary" id="BUTTONMO" onclick="user_check_id()">
    									중복확인
    								</button>
    							</div>
    						</div>
    						<div class="form-group row">
    							<div class="alert alert-secondary text-center" role="alert"
    								 id="alertsizeinput">비밀번호
    							</div>
    							<input type="password" class="form-control" id="form-input-password01"
    								   placeholder="4~15자리까지 입력해주세요" name="user_Pw" oninput="checkPass01()">
    						</div>
    						<div class="form-group row">
    							<div class="alert alert-secondary text-center" role="alert"
    								 id="alertsizeinput">비밀번호확인
    							</div>
    							<input type="password" class="form-control" id="form-input-password02"
    								   placeholder="4~15자리까지 입력해주세요" oninput="checkPass02()">
    							<!-- 비밀번호 일치 되었을 경우 이미지 생성-->
    							<div id="check_pass"></div>
    						</div>
    						<div class="form-group row">
    							<div class="alert alert-secondary text-center" role="alert"
    								 id="alertsizeinput">닉네임
    							</div>
    							<input type="text" class="form-control" id="form-input-name" name="user_Name"
    								   placeholder="4~15자리까지 입력해주세요" oninput="user_form_name()">
    							<!-- 닉네임 일치 되었을 경우 -->
    							<div id="check_name_mollang">
    								<button type="button" class="btn btn-secondary" id="BUTTONMO"
    										onclick="user_check_name()">중복확인
    								</button>
    							</div>
    						</div>
    						<div class="form-group row">
    							<div class="alert alert-secondary text-center" role="alert"
    								 id="alertsize">내직업
    							</div>
    							<select class="custom-select my-1 mr-sm-2"
    									id="mollangtest"  onchange="second()">   /*대분류*/
    							</select>
    							<select class="custom-select my-1 mr-sm-2"
    									id="mollangtest1"  onchange="third()">      /*중분류*/
    							</select>
    							<select class="custom-select my-1 mr-sm-2"
    									id="mollangtest2" name="user_Job"> /*소분류*/
    							</select>
    						</div>
    						<div class="form-group row">
    							<div class="alert alert-secondary text-center" role="alert"
    								 id="alertsize" >관심직업
    							</div>
    							<select class="custom-select my-1 mr-sm-2"
    									id="mollangtest3" onchange="second1()">   /*대분류*/
    							</select>
    							<select class="custom-select my-1 mr-sm-2"
    									id="mollangtest4" onchange="third1()">      /*중분류*/
    							</select> <select class="custom-select my-1 mr-sm-2"
    											  id="mollangtest5" name="inter_Job1" onchange="start2()" >/*소분류*/
    						</select>
    						</div>
    
    						<div class="form-group row">
    							<div class="alert alert-secondary" id="alertsize">관심직업</div>
    							<select class="custom-select my-1 mr-sm-2"
    									id="mollangtest6" onchange="second2()">   /*대분류*/
    							</select>
    							<select class="custom-select my-1 mr-sm-2"
    									id="mollangtest7"  onchange="third2()">      /*중분류*/
    							</select> <select class="custom-select my-1 mr-sm-2"
    											  id="mollangtest8" name="inter_Job2" onchange="start3()">/*소분류*/
    						</select>
    						</div>
    
    						<div class="form-group row">
    							<div class="alert alert-secondary text-center" role="alert"
    								 id="alertsize">관심직업
    							</div>
    							<select class="custom-select my-1 mr-sm-2"
    									id="mollangtest9" onchange="second3()">   /*대분류*/
    							</select>
    							<select class="custom-select my-1 mr-sm-2"
    									id="mollangtest10"  onchange="third3()">      /*중분류*/
    							</select> <select class="custom-select my-1 mr-sm-2"
    											  id="mollangtest11" name="inter_Job3">/*소분류*/
    						</select>
    						</div>
    
    						<div class="form-group row">
    							<div class="alert alert-secondary text-center" role="alert"
    								 id="alertsize">MBTI
    							</div>
    
    							<select class="custom-select mr-sm-2"
    									id="inlineFormCustomSelectPrefMBTI" name="mbti_Mbti">
    								<option selected>List</option>
    								<option value="1">One</option>
    								<option value="2">Two</option>
    								<option value="3">Three</option>
    							</select>
    							<button type="button" class="btn btn-secondary" id="BUTTONMO">MBTI
    								하러가기
    							</button>
    						</div>
    						<div class="form-group row-center text-center">
    							<button type="button" id="join-submit" class="btn btn-secondary" onclick="sucee()">
    								회원가입<i class="fa fa-check spaceLeft"></i>
    							</button>
    							<button type="reset" class="btn btn-secondary">
    								가입취소<i class="fa fa-times spaceLeft"></i>
    							</button>
    						</div>
    					</form>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    
    
    
    <script>
    
    	//화면 켜졌을 때.
    	function start()
    	{
    		//대, 중, 소 제목 목록 가져오기.
    		first();
    		//MBTI 목록 가져오기
    		mbti();
    	}
    
    	//MBTI 목록 불러오기
    	function mbti() {
    		$.ajax({
    			type: "GET",
    			url:"join_mbti",
    			datatype:"json",
    			success:function(json) {
    				$('#inlineFormCustomSelectPrefMBTI').empty();
    				console.log(json);
    				$('#inlineFormCustomSelectPrefMBTI').append("<option value='0'>MBTI 선택</option>")
    				for(i = 0; i < json.length; i++)
    				{
    					$('#inlineFormCustomSelectPrefMBTI').append("<option value="+json[i].mbti_Name+">"+json[i].mbti_Name+"</option>");
    					console.log();
    				}
    			}
    		});
    	}
    
    
    	function first()
    	{
    		$.ajax({
    			type: "GET",
    			url: "../jsondata/Job_List.json",
    			datatype: "json",
    			success: function (json) {
    				//요소 삭제하기
    				$('#mollangtest option:eq(0)').remove();
    				$('#mollangtest3 option:eq(0)').remove();
    				$('#mollangtest6 option:eq(0)').remove();
    				$('#mollangtest9 option:eq(0)').remove();
    
    				$('#mollangtest').append("<option selected >대분류</option>");
    				$('#mollangtest1').append("<option selected >중분류</option>");
    				$('#mollangtest2').append("<option selected >소분류</option>");
    
    				$('#mollangtest3').append("<option selected >대분류</option>");
    				$('#mollangtest4').append("<option selected >중분류</option>");
    				$('#mollangtest5').append("<option selected >소분류</option>");
    
    				$('#mollangtest6').append("<option selected >대분류</option>");
    				$('#mollangtest7').append("<option selected >중분류</option>");
    				$('#mollangtest8').append("<option selected >소분류</option>");
    
    				$('#mollangtest9').append("<option selected >대분류</option>");
    				$('#mollangtest10').append("<option selected >중분류</option>");
    				$('#mollangtest11').append("<option selected >소분류</option>");
    
    				var $jobsDo = json.jobsDo;
    				for (i = 0; i < $jobsDo.length; i++) {
    					console.log($jobsDo[i].jobLrclNm);
    					//셀렉박스 안에 요소 넣기
    					if(i !=0 && $jobsDo[i-1].jobLrclNm != $jobsDo[i].jobLrclNm) {
    						$('#mollangtest').append("<option value='" + $jobsDo[i].jobLrclNm + "'>" + $jobsDo[i].jobLrclNm + "</option>");
    						$('#mollangtest3').append("<option value='" + $jobsDo[i].jobLrclNm + "'>" + $jobsDo[i].jobLrclNm + "</option>");
    						$('#mollangtest6').append("<option value='" + $jobsDo[i].jobLrclNm + "'>" + $jobsDo[i].jobLrclNm + "</option>");
    						$('#mollangtest9').append("<option value='" + $jobsDo[i].jobLrclNm + "'>" + $jobsDo[i].jobLrclNm + "</option>");
    					} else if(i ==0)
    					{
    						$('#mollangtest').append("<option value='" + $jobsDo[i].jobLrclNm + "'>" + $jobsDo[i].jobLrclNm + "</option>");
    						$('#mollangtest3').append("<option value='" + $jobsDo[i].jobLrclNm + "'>" + $jobsDo[i].jobLrclNm + "</option>");
    						$('#mollangtest6').append("<option value='" + $jobsDo[i].jobLrclNm + "'>" + $jobsDo[i].jobLrclNm + "</option>");
    						$('#mollangtest9').append("<option value='" + $jobsDo[i].jobLrclNm + "'>" + $jobsDo[i].jobLrclNm + "</option>");
    					}
    				}
    			}
    		});
    	}
    
    
    	//대분류 버튼 눌렀을 때, 중분류 나타내기
    	function second()
    	{
    		var abc = $('#mollangtest').val();        //비교할 대분류
    
    		$.ajax({
    			type: "GET",
    			url: "../jsondata/Job_List.json",
    			datatype: "json",
    			success: function (json) {
    				var $jobsDo = json.jobsDo;
    				$('#mollangtest1').empty();
    				$('#mollangtest1').append("<option selected >중분류</option>");
    				$('#mollangtest2').empty();
    				$('#mollangtest2').append("<option selected >소분류</option>");
    				for (i = 0; i < $jobsDo.length; i++) {
    					console.log($jobsDo[i].jobMdclNm);
    					if(abc == $jobsDo[i].jobLrclNm) {
    						if(i !=0 && $jobsDo[i-1].jobMdclNm != $jobsDo[i].jobMdclNm) {
    							$('#mollangtest1').append("<option value='" + $jobsDo[i].jobMdclNm + "'>" + $jobsDo[i].jobMdclNm + "</option>");
    						} else if(0 == i)
    						{
    							$('#mollangtest1').append("<option value='" + $jobsDo[i].jobMdclNm + "'>" + $jobsDo[i].jobMdclNm + "</option>");
    						}
    					}
    				}
    			}
    		});
    	}
    
    	//관심직업1<증분류 보기>
    	function second1()
    	{
    		var abc = $('#mollangtest3').val();        //비교할 대분류
    
    		$.ajax({
    			type: "GET",
    			url: "../jsondata/Job_List.json",
    			datatype: "json",
    			success: function (json) {
    				var $jobsDo = json.jobsDo;
    				$('#mollangtest4').empty();
    				$('#mollangtest4').append("<option selected >중분류</option>");
    				$('#mollangtest5').empty();
    				$('#mollangtest5').append("<option selected >소분류</option>");
    				for (i = 0; i < $jobsDo.length; i++) {
    					if(abc == $jobsDo[i].jobLrclNm) {
    						if(i !=0 && $jobsDo[i-1].jobMdclNm != $jobsDo[i].jobMdclNm) {
    							$('#mollangtest4').append("<option value='" + $jobsDo[i].jobMdclNm + "'>" + $jobsDo[i].jobMdclNm + "</option>");
    						} else if(i ==0)
    						{
    							$('#mollangtest4').append("<option value='" + $jobsDo[i].jobMdclNm + "'>" + $jobsDo[i].jobMdclNm + "</option>");
    						}
    					}
    				}
    			}
    		});
    	}
    	//관심직업2<중분류 보기>
    	function second2()
    	{
    		var abc = $('#mollangtest6').val();        //비교할 대분류
    
    		$.ajax({
    			type: "GET",
    			url: "../jsondata/Job_List.json",
    			datatype: "json",
    			success: function (json) {
    				var $jobsDo = json.jobsDo;
    				$('#mollangtest7').empty();
    				$('#mollangtest7').append("<option selected >중분류</option>");
    				$('#mollangtest8').empty();
    				$('#mollangtest8').append("<option selected >소분류</option>");
    				for (i = 0; i < $jobsDo.length; i++) {
    					if(abc == $jobsDo[i].jobLrclNm) {
    						if(i !=0 && $jobsDo[i-1].jobMdclNm != $jobsDo[i].jobMdclNm) {
    							$('#mollangtest7').append("<option value='" + $jobsDo[i].jobMdclNm + "'>" + $jobsDo[i].jobMdclNm + "</option>");
    						} else if(i ==0)
    						{
    							$('#mollangtest7').append("<option value='" + $jobsDo[i].jobMdclNm + "'>" + $jobsDo[i].jobMdclNm + "</option>");
    						}
    					}
    				}
    			}
    		});
    	}
    
    	//관심직업3<중분류 보기>
    	function second3()
    	{
    		var abc = $('#mollangtest9').val();
    
    		$.ajax({
    			type: "GET",
    			url: "../jsondata/Job_List.json",
    			datatype: "json",
    			success: function (json) {
    				var $jobsDo = json.jobsDo;
    				$('#mollangtest10').empty();
    				$('#mollangtest10').append("<option selected >중분류</option>");
    				$('#mollangtest11').empty();
    				$('#mollangtest11').append("<option selected >소분류</option>");
    				for (i = 0; i < $jobsDo.length; i++) {
    					if(abc == $jobsDo[i].jobLrclNm) {
    						if(i !=0 && $jobsDo[i-1].jobMdclNm != $jobsDo[i].jobMdclNm) {
    							$('#mollangtest10').append("<option value='" + $jobsDo[i].jobMdclNm + "'>" + $jobsDo[i].jobMdclNm + "</option>");
    						} else if(i ==0)
    						{
    							$('#mollangtest10').append("<option value='" + $jobsDo[i].jobMdclNm + "'>" + $jobsDo[i].jobMdclNm + "</option>");
    						}
    					}
    				}
    			}
    		});
    	}
    
    
    	//소분류
    	//내 직업
    	function third()
    	{
    		var abc = $('#mollangtest1').val();
    		$.ajax({
    			type:"GET",
    			url: "../jsondata/Job_List.json",
    			datatype: "json",
    			success: function(json) {
    				var $jobsDo = json.jobsDo;
    				$('#mollangtest2').empty();
    				$('#mollangtest2').append("<option selected >소분류</option>");
    				for (i = 0; i < $jobsDo.length; i++) {
    					console.log($jobsDo[i].jobSmclNm);
    					if(abc == $jobsDo[i].jobMdclNm) {
    						if(i !=0 && $jobsDo[i-1].jobSmclNm != $jobsDo[i].jobSmclNm) {
    							$('#mollangtest2').append("<option value='" + $jobsDo[i].jobSmclNm + "'>" + $jobsDo[i].jobSmclNm + "</option>");
    						} else if(i ==0)
    						{
    							$('#mollangtest2').append("<option value='" + $jobsDo[i].jobSmclNm + "'>" + $jobsDo[i].jobSmclNm + "</option>");
    						}
    					}
    				}
    			}
    		});
    	}
    
    	//관심직업1
    	function third1()
    	{
    		var abc = $('#mollangtest4').val();
    
    		$.ajax({
    			type:"GET",
    			url: "../jsondata/Job_List.json",
    			datatype: "json",
    			success: function(json) {
    				var $jobsDo = json.jobsDo;
    				$('#mollangtest5').empty();
    				$('#mollangtest5').append("<option selected >소분류</option>");
    				for (i = 0; i < $jobsDo.length; i++) {
    					if(abc == $jobsDo[i].jobMdclNm) {
    						if(i !=0 && $jobsDo[i-1].jobSmclNm != $jobsDo[i].jobSmclNm) {
    							$('#mollangtest5').append("<option value='" + $jobsDo[i].jobSmclNm + "'>" + $jobsDo[i].jobSmclNm + "</option>");
    						} else if(i ==0)
    						{
    							$('#mollangtest5').append("<option value='" + $jobsDo[i].jobSmclNm + "'>" + $jobsDo[i].jobSmclNm + "</option>");
    						}
    					}
    				}
    			}
    		});
    	}
    	//관심직업2
    	function third2()
    	{
    		var abc = $('#mollangtest7').val();
    
    		$.ajax({
    			type:"GET",
    			url: "../jsondata/Job_List.json",
    			datatype: "json",
    			success: function(json) {
    				var $jobsDo = json.jobsDo;
    				$('#mollangtest8').empty();
    				$('#mollangtest8').append("<option selected >소분류</option>");
    				for (i = 0; i < $jobsDo.length; i++) {
    					if(abc == $jobsDo[i].jobMdclNm) {
    						if(i !=0 && $jobsDo[i-1].jobSmclNm != $jobsDo[i].jobSmclNm) {
    							$('#mollangtest8').append("<option value='" + $jobsDo[i].jobSmclNm + "'>" + $jobsDo[i].jobSmclNm + "</option>");
    						} else if(i ==0)
    						{
    							$('#mollangtest8').append("<option value='" + $jobsDo[i].jobSmclNm + "'>" + $jobsDo[i].jobSmclNm + "</option>");
    						}
    					}
    				}
    			}
    		});
    	}
    	//관심직업3
    	function third3()
    	{
    		var abc = $('#mollangtest10').val();
    
    		$.ajax({
    			type:"GET",
    			url: "../jsondata/Job_List.json",
    			datatype: "json",
    			success: function(json) {
    				var $jobsDo = json.jobsDo;
    				$('#mollangtest11').empty();
    				$('#mollangtest11').append("<option selected >소분류</option>");
    				for (i = 0; i < $jobsDo.length; i++) {
    					if(abc == $jobsDo[i].jobMdclNm) {
    						if(i !=0 && $jobsDo[i-1].jobSmclNm != $jobsDo[i].jobSmclNm) {
    							$('#mollangtest11').append("<option value='" + $jobsDo[i].jobSmclNm + "'>" + $jobsDo[i].jobSmclNm + "</option>");
    						} else if(i ==0)
    						{
    							$('#mollangtest11').append("<option value='" + $jobsDo[i].jobSmclNm + "'>" + $jobsDo[i].jobSmclNm + "</option>");
    						}
    					}
    				}
    			}
    		});
    	}
    
    </script>
    
    
    <!-- 유효성 검사 부분 -->
    <script>
    	/* 중복 값 검사 가능 변수 */
    	var check_id = "0";
    	var check_pass = "0";
    	var check_name = "0";
    	var check_mbti = "0";
    
    
    	//아이디 중복 체크 하기
    	function user_check_id() {
    		const user_id = $('#form-input-id').val();
    
    		if(user_id.length < 4 || user_id.length > 15)
    		{
    			check_id = "0";
    			alert('아이디를 4자리이상 15자리이하 입력 바랍니다.');
    			return false;
    		}
    
    		$.ajax({
    			url: "member_join_check_id",
    			data: {User_id: user_id},
    			dataType: "text",
    			success: function (data) {
    				if (data == 'null') {
    					check_id = "1";
    					$('#check_id_mollang').empty();
    					$('#check_id_mollang').append("<i class='far fa-check-circle' style='font-size: 30px; margin-top: 5px; color:#00FF1F'></i>");
    				} else {
    					check_id = "0";
    					$('#check_id_mollang').empty();
    					$('#check_id_mollang').append("<i class='far fa-times-circle' style='font-size: 30px; margin-top: 5px; color:#f00'></i>");
    				}
    			}
    		})
    	}
    
    	//닉네임 중복 확인
    	function user_check_name() {
    		const User_name = $('#form-input-name').val();
    
    		if(User_name.length < 4 || User_name.length > 15)
    		{
    			check_name = "0";
    			alert('닉네임을 4자리이상 15자리이하 입력 바랍니다.');
    			return false;
    		}
    
    		$.ajax({
    			url: "member_join_check_name",
    			data: {User_name: User_name},
    			dataType: "text",
    			success: function (data) {
    				if (data == 'null') {
    					check_name = "1";
    					$('#check_name_mollang').empty();
    					$('#check_name_mollang').append("<i class='far fa-check-circle' style='font-size: 30px; margin-top: 5px; color:#00FF1F'></i>");
    				} else {
    					check_name = "0";
    					$('#check_name_mollang').empty();
    					$('#check_name_mollang').append("<i class='far fa-times-circle' style='font-size: 30px; margin-top: 5px; color:#f00'></i>");
    				}
    			}
    		})
    	}
    
    	var pass01 = "";
    	var pass02 = "";
    
    	//비밀번호 중복 체크 하기
    	function checkPass01() {
    		pass01 = $('#form-input-password01').val();
    		if (pass01 == pass02) {
    			check_pass = "1";
    			$('#check_pass').append("<i class='far fa-check-circle' style='font-size: 30px; margin-top: 5px; color:#00FF1F'></i>");
    		} else {
    			check_pass = "0";
    			$('#check_pass').empty();
    		}
    	}
    
    	//비밀번호 확인 유효성 검사
    	function checkPass02() {
    		pass02 = $('#form-input-password02').val();
    		//비밀번호 체크
    		if(pass02.length <4 || pass02.length > 15)
    		{
    			check_pass = "0";
    			$('#check_pass').empty();
    		}
    		else if (pass01 == pass02) {
    			check_pass = "1";
    			$('#check_pass').append("<i class='far fa-check-circle' style='font-size: 30px; margin-top: 5px; color:#00FF1F'></i>");
    		} else {
    			check_pass = "0";
    			$('#check_pass').empty();
    		}
    	}
    
    	// 중복 확인 상태에서 키 눌렀을 경우 버튼 만들기 ( 아이디)
    	function user_form_id() {
    		check_id = "0";
    		$('#check_id_mollang').empty();
    		$('#check_id_mollang').append("<button type='button' class='btn btn-secondary' id='BUTTONMO' onclick='user_check_id()' >중복확인</button>");
    	}
    
    	// 중복 확인 상태에서 키 눌렀을 경우 버튼 만들기 ( 닉네임)
    	function user_form_name() {
    		check_name = "0";
    		$('#check_name_mollang').empty();
    		$('#check_name_mollang').append("<button type='button' class='btn btn-secondary' id='BUTTONMO' onclick='user_check_name()' >중복확인</button>");
    	}
    
    	//MBTI 선택 확인하기
    	$('#inlineFormCustomSelectPrefMBTI').on('change', function() {
    		check_mbti = $('#inlineFormCustomSelectPrefMBTI').val();
    	});
    
    
    	//위에 조건 모두 성립시 회원가입 진행
    	function sucee() {
    
    		//아이디를 확인해주세요.
    		if(check_id == "0")
    		{
    			alert("아이디를 확인해주세요.");
    			return false;
    		}
    		//비밀번호를 확인해주세요.
    		else if(check_pass == "0"){
    			alert("비밀번호를 확인해주세요.");
    			return false;
    		}
    		//닉네임 유효성 검사
    		else if(check_name == "0") {
    			alert("닉네임을 확인해주세요.");
    			return false;
    		}
    		//MBTI
    		else if(check_mbti == "0"){
    			alert("MBTI를 체크해주세요.");
    			return false;
    		}
    		//정상 처리
    		else
    		{
    			alert("회원가입에 성공");
    			document.insertjoin.submit();
    		}
    
    	}
    
    </script>
    </body>
    </html>

    Ajax 이용해서 유효성 검사를 진행하였다.

     

    방식은 마이바티스방식을 이용하였으며, 아래는 서버하고 연결 관계이다.

     

    Controller

     //아이디 중복 체크
        @RequestMapping("/member_join_check_id")
        public String member_join_check_id(@RequestParam("User_id") String user_id) throws Exception
        {
            System.out.println("닉네임 중복 체크 확인하기");
            return us.join_id_check(user_id);
        }
    
        //닉네임 중복 체크
        @RequestMapping("/member_join_check_name")
        public String member_join_check_name(@RequestParam("User_name") String user_name) throws  Exception
        {
            System.out.println("닉네임 중복 체크");
            return us.join_name_check(user_name);
        }
    

     

    Service

    //아이디 중복 체크
        public String join_id_check(String id) throws Exception {
            UserMapper dao = sqlSession.getMapper(UserMapper.class);
    
            User_List abc = dao.join_id_check(id);
    
            if(abc == null)
                return "null";
            else
                return "success";
        }
    
        //닉네임 중복 체크
        public String join_name_check(String name) throws Exception {
            UserMapper dao = sqlSession.getMapper(UserMapper.class);
    
            User_List abc = dao.join_name_check(name);
    
            if(abc == null)
                return "null";
            else
                return "success";
        }
    
        //회원가입 하기
        public void join_process(User_List user_list) {
            UserMapper dao = sqlSession.getMapper(UserMapper.class);
    
            dao.join_process(user_list);
            System.out.println(user_list.toString());
            System.out.println("시스템 : 가입 완료");
        }

     

    XML

    <!-- 아이디 중복 체크 -->
    	<select id="join_id_check" resultType="com.example.project.today.dto.User_List">
    		SELECT * FROM USER_LIST WHERE USER_ID = #{user_id}
    	</select>
    
    	<!-- 닉네임 중복 체크 -->
    	<select id="join_name_check" resultType="com.example.project.today.dto.User_List">
    		SELECT * FROM USER_LIST WHERE USER_NAME = #{USER_NAME}
    	</select>
    
    	<!-- 회원가입 -->
    	<insert id="join_process" parameterType="com.example.project.today.dto.User_List">
    		INSERT INTo USER_LIST (USER_CODE, USER_ID, USER_PW, USER_NAME, USER_JOB, INTER_JOB1, INTER_JOB2, INTER_JOB3, MBTI_MBTI) VALUES
    		(USER_LIST_SEQ.NEXTVAL, #{user_Id}, #{user_Pw}, #{user_Name}, #{user_Job}, #{inter_Job1}, #{inter_Job2}, #{inter_Job3}, #{mbti_Mbti})
    	</insert>

     

    반응형

    댓글

    Designed by JB FACTORY