[Spring boot] 회원가입 기능 구현

회원가입에 필요한 기능의 스크립트들

### 버튼클릭시 사진 불러오기, 사진불러오면 이미지 미리보기

//1. photo1을 누르면 photo2가 실행됨

$("#photo1").click(function(){
		$("#photo2").trigger("click");
	});
	
//2. 사진불러오면 이미지 미리보기
	$("#photo2").change(function(){
		
		  if ($(this)[0].files[0]) {
		        var reader = new FileReader();
		        reader.onload = function (e) {
		            $("#showimg").attr('src', e.target.result);
		        }
		        reader.readAsDataURL($(this)[0].files[0]);
		    }
	});    

---

중복체크 버튼 클릭시 아이디 체크, 다시 아이디 입력시 체크값 제거

//중복체크 버튼시 아이디 체크
	$("#idcheck").click(function(){
		
		$.ajax({
			type:"get",
			dataType:"json",
			url:"idcheck",
			data:{"id":$("#id").val()},
			success:function(res){
				if(res.count==0){
					$("span.ids").text("ok");
				}else{
					$("span.ids").text("fail");
				}
			}
		});
	});
	
	//아이디 입력시 ids값 지움
	$("#id").keyup(function(){
		$("span.ids").text("");
	});

contoller

	@GetMapping("/member/idcheck")
	@ResponseBody
	public Map<String, Integer> idCheck(String id)
	{
		Map<String, Integer> map=new HashMap<>();
		
		//id
		int n=service.getSearchId(id);
		map.put("count", n);  //0  or 1  {"count":0}
		
		return map;
	}

반환값이 있는 ajax는 Map으로 리턴. 파라메터 id와 db값을 비교하는 메서드를 호출. 참이면 count==1 아니라면 count==0 을 ajax로 {"count":0}형식으로 전달

---

비밀번호 확인란 일치여부 확인

//2번째 비밀번호 입력시 체크
	$("#비밀번호확인").keyup(function(){
		
		var p1=$("#비밀번호").val();
		var p2=$(this).val();
		if(p1==p2){
			$("span.pass").text("ok");
		}else{
			$("span.pass").text("");
		}
	});	
});

---

submit호출 전 미입력 알림

//submit전에 호출 form에 'onsubmit="return check()'"형식으로 준다

function check(){
	//사진
	if($("#사진").val()==''){
		alert("사진을 넣어주세요");
		return false;
	}
	//중복체크
	if($("아이디 중복결과확인칸").text()!='ok'){
		alert("아이디 중복체크 해주세요");
		return false;
	}
	
	//비밀번호
    if($("비밀번호 일치 확인칸").text()!='ok'){
    	alert("비밀번호가 서로 다릅니다!!");
		return false;
    }
}