회원가입

고려사항

• 빈 값이 들어가지 않도록
• 정규식 검사(아이디, 비밀번호, 이름, 이메일, 연락처, 생년월일) ==⇒ 코드가 길어져서 빈 값 검사와 정규식, 중복체크 여부검사로 분리했음
  
• 아이디 중복 체크
• 비밀번호 확인 및 메시지 출력
• 연락처 합치기
• 부가 기능: 로고를 누르면 메인 이동, 계정이 이미 있다면 로그인

---

핵심 코드

---

빈 값이 들어가지 않도록(코드 예시)

• alert를 뜨게하고, 해당 빈 값에 focus를 준다. 그리고 return false로 진행 중단

  =⇒ 음.. 반복되는 유효성 검사를 간결하게 하는 방법은 없을까?

  if($("[name=uiId]").val().trim()==""){
  						alert("아이디을 입력해주세요.");
  						$("[name=uiId]").focus();
  						return false;	
        }

배운 것: return;을 쓰면 null을 리턴하는데 유효성 검사 중 null을 받으면 응답받는 입장에서는 이게 검사가 통과인지 아닌지 알 수 없다. 그래서 false를 응답하여 검사에 통과하지 못했고 그로 인해 submit 이벤트가 실패했다는명확한 의미 전달을 위해서 애매한 return이 아닌 return false를 명시하는 게 좋다.

---

정규식 검사(아이디, 비밀번호, 이름, 이메일, 연락처, 생년월일)

  if(!checkPw($("#pw").val())){
           	 alert("패스워드는 각각 하나 이상의 숫자, 영어로 최소 8글자에서 최대 20자 가능합니다.");
           	  return false;
            };
  
  // 연락처 숫자 아니면 거르기
           if(isNaN($("[name=phone2]").val()) || 
           		isNaN($("[name=phone3]").val())){
               alert("연락처는 숫자만 입력할 수 있습니다.")
               return false;
           }
  
  -------
  
  // 아이디 정규식
  function checkId(Id){ 
  		// 영문자로 시작해서 영어, 숫자로만 4~20글자 // ""를 하면 함수가 아니라고 에러
  	let regId = /^[a-z]{1}(?=.*[a-z])(?=.*[0-9]).{3,19}$/;
  		  if(!regId.test(Id)) {                            
  	          return false;         
  	     }                            	
  	     else {                       	
  	          return true;         	
  	     }          
  
  	}
  
  // 비밀번호 정규식
  function checkPw(Pw){
  		// 최소 하나이상의 영어, 숫자 8~20글자 필요
  	   let regPw = /^(?=.*[a-zA-z])(?=.*[0-9]).{8,20}$/;
  		  if(!regPw.test(Pw)) {                            
            return false;         
       }                            	
       else {                       	
            return true;         	
       }          
  	
  }
  
  // 이메일 형식 확인 
  function CheckEmail(email){
  
     let regEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
  					
       if(!regEmail.test(email)) {                            
            return false;         
       }                            	
       else {                       	
            return true;         	
       }                            
  
  }           
   
  // 이름 정규식   
   function CheckName(name){
  	 
  	 let regName= /^[가-힣a-zA-Z]+$/;  // 영문 + 한글은 반드시 모음으로, 띄어쓰기 불가능
  	 
  	 if(!regName.test(name)){
  		   return false;         
       }                            	
       else {                       	
            return true;         	
       }                            
  
  	 
   }
  
  // 생년월일 유효성 추가
      	let today = new Date();
      	let year = today.getFullYear(); // 년도
      	let month = today.getMonth() + 1+"";  // 월
      	let date = today.getDate()+"";  // 날짜
      	
      	let maxBirth = year+"-"+month.padStart(2,"0")+"-"+date.padStart(2,"0");
      	
      	$("[name=uiBirth]").attr("max", maxBirth);

---

아이디 중복 체크

• count(*) 로 1인지, 0인지 여부에 따라 중복 체크 처리
• JS 처음에 idChkResult=1 로 선언해두고, 중복이 아닐 때 0으로 처리하게끔
• 느낀점

  • 일단은 중복 체크하고나서 아이디 변경할 수 없게 해놨는데, 수정하고나서 다시 풀리게끔 처리해야한다.

    axios({
    		method:"get",
    		url: "/borampms/idchk.do", // 이걸로 restController 와 연결
    		params: {uiId: vm.uiId} // 받은 매개변수 객체 사용
    	}).then((res)=>{
    		vm.result = res.data;
    		
    		console.log("# 최종 받은 모델 #")
    		console.log(vm.result);
    		
        if(vm.result == 0){
        alert("사용가능한 아이디입니다.");
        $("[name=uiId]").attr("readonly", true);
        idChkResult = 0;
        }else{
            alert("중복된 아이디입니다.");
        }
    	
    	}).catch(error=>{
    		console.log(error)
    		throw new Error(error)
    	})
    
    ----- Mapper
    <select id="idChk" parameterType="user" resultType="int">
    		SELECT count(*)
    		FROM user_info
    		WHERE UI_ID = #{uiId}
    	</select>

---

비밀번호 확인 및 메시지 출력

• 만약 비밀번호가 공백이 아니라면 진행
• 비밀번호 일치 x와 일치할 때 메시지 출력
• 패스워드와 패스워드 확인 창 중 하나라도 없으면 메시지 출력 x
• 느낀점

  • 음...비밀번호 입력 시, 공백도 인식하는듯한데?

  • 코드가 좀 지저분한 느낌...

    chkPw:function(){
    	if($("#pw").val().trim()!=""){
    		if($("#pw").val()!=$("#pw2").val()){ 
    			$("#pwMsg").css("color","red").text("비밀번호가 일치하지않습니다.");
    			
    		}else{
    			$("#pwMsg").css("color","green").text("비밀번호가 일치합니다.");	
    		}
    		
    	}
    	// 패스워드확인에 아무것도 없을 때는 메시지x
    	if($("#pw2").val().trim()=="" || $("#pw").val().trim()==""){
    		$("#pwMsg").text("");
    	}
    	
    },
    chkPw2:function(){
    	$("#pw2").keyup(function(){
    		if($("#pw2").val().trim()!=""){ 
    			if($("#pw2").val()!=$("#pw").val()){ 
    				$("#pwMsg").css("color","red").text("비밀번호가 일치하지않습니다.");
    				
    			}else{
    				$("#pwMsg").css("color","green").text("비밀번호가 일치합니다.");	
    			}
    			
    		}
    		// 패스워드에 아무것도 없을 때는 메시지x
    		if($("#pw").val().trim()=="" || $("#pw2").val().trim()==""){
    			$("#pwMsg").text("");
    			
    		}
    	})
    },

---

연락처 합치기

```jsx
<div class="row g-3 mb-3">
  <label for="phone1" class="form-label">연락처</label>
  <input type="text" name="uiPhone" hidden>
  <div class="col mt-0" >
      <select class="form-select mb-3"  required name="phone1">
          <option selected value="010">010</option>
          <option value="011">011</option>
          <option value="016">016</option>
          <option value="017">017</option>
          <option value="018">018</option>
          <option value="019">019</option>
      </select>     

  </div>
  -<div class="col mt-0"><input type="text" name="phone2" class="form-control" maxLength="4" required/></div>
  -<div class="col mt-0"><input type="text" name="phone3" class="form-control" maxLength="4" required/></div>
</div>

-------

// 연락처 합치기
         $("[name=uiPhone]").val($("[name=phone1]").val()
         		+$("[name=phone2]").val()+$("[name=phone3]").val());
```