회원 가입 2 (ajax로 id중복 체크, 비밀번호 확인)

1> ID 중복 체크

• Ajax를 이용하여 POST방식으로 checkSingup 요청한다.

• 요청 시 파라미터로 id값을 보낸다.

• Success 요청 성공 시, 조건을 data == “YES” 고 id값이 null이 아니면 사용가능한 것, 그렇지 않으면 중복 된 아이디라고 alert창 뜨게 함.

• 중복 된 아이디일 경우, id값이 null이 되고 focus가 맞춰진다.

<view>

$(function(){ //아이디 중복체크    $('#id').blur(function(){        $.ajax({     type:"POST",     url:"checkSignup",     data:{            "id":$('#id').val()     },     success:function(data){ //data : checkSignup에서 넘겨준 결과값            if($.trim(data)=="YES"){               if($('#id').val()!=''){                alert("사용가능한 아이디입니다.");               }            }else{               if($('#id').val()!=''){                  alert("중복된 아이디입니다.");                  $('#id').val('');                  $('#id').focus();               }            }         }    })     }) });

<controller>

//아이디 중복 체크 @RequestMapping(value = "/checkSignup", method = RequestMethod.POST) public @ResponseBody String AjaxView(          @RequestParam("id") String id){ String str = ""; int idcheck = dbPro.idCheck(id); if(idcheck==1){ //이미 존재하는 계정 str = "NO"; }else{ //사용 가능한 계정 str = "YES"; } return str; }

2> 비밀번호 확인

• Pw와 pw2가 같은지 확인 한다.

• 일치하지 않을 시, alert창을 띄우고 pw2 값을 null로 바꾸고 focus 맞춘다.

<JavaScript>

$(function(){ //비밀번호 확인 $('#pw2').blur(function(){   if($('#pw').val() != $('#pw2').val()){     if($('#pw2').val()!=''){    alert("비밀번호가 일치하지 않습니다.");        $('#pw2').val('');          $('#pw2').focus();       }    } })      });

<view>

<p> <label>*비밀번호</label> <input class="w3-input" type="password" style="width:90%" id="pw" name="pw" value="1234" required> </p> <p> <label>*비밀번호 확인</label> <input class="w3-input" type="password" style="width:90%" id="pw2" value="1234" required></p>