8. 회원가입 폼

순서:

1) 이름 공백 체크

2) ID 중복 체크

3) 패스워드 재확인

1) 이름 공백 체크

<input 태그>

            <div class="form-group has-feedback">
                <label class="control-label col-sm-2" for="uName">이름 :</label>
                <div class="col-sm-4">
                    <input class="form-control" type="text" id="uName" name="name" value="">
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                    <input class="check" type="hidden" name="checkNameFlag" value="0">
                </div>
            </div>

<중복되는 처리를 변수로 지정>

        var hasError = function(thisVal){
            //switchClass 만약 바꿀 클래스가 없으면 그냥 더한다.
            $(thisVal).parents(".has-feedback").switchClass("has-success","has-error");
            $(thisVal).siblings(".form-control-feedback").switchClass("glyphicon-ok","glyphicon-remove");
            $(thisVal).siblings("input.check").val(0);
        }
        
        var hasSuccess = function(thisVal){
            $(thisVal).parents(".has-feedback").switchClass("has-error","has-success");
            $(thisVal).siblings(".form-control-feedback").switchClass("glyphicon-remove","glyphicon-ok");
            $(thisVal).siblings("input.check").val(1);
        }

<동작 지정>

        $("#uName").blur(function(){
            if(!this.value){
                hasError(this);
            }else{
                hasSuccess(this);
            }
        });

2) ID 중복 체크

<input 태그>

            <div class="form-group has-feedback">
                <label class="control-label col-sm-2" for="userId">ID :</label>
                <div class="col-sm-4">
                    <input class="form-control" type="text" id="userId" name="id" value="">
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                    <input class="check" type="hidden" name="checkIdFlag" value="0">
                </div>
            </div>

<컨트롤러에 만들어놓은 checkId()를 AJAX로 돌리기>

        $("#userId").blur(function(){
              var thisVal = this;
              var idVal = $(this).val();
              if(idVal){
                 var url = "checkId/"+idVal;
                 
                 $.ajax(url,{
                    type:"GET",
                    dataType:"json",
                    success:function(data){
                       if(!data["checkId"]){
                          hasSuccess(thisVal);
                       }else{
                          hasError(thisVal);
                       }
                    }
                 });
              }else{
                 hasError(this);
              }
           });

3) 패스워드 재확인

**input 태그는 다른 것과 동일하여 생략**

<if문으로 중복 체크와 패스워드 일치를 동시에 수행>

        $("#uPass").change(function(){
              if(this.value == this.form.pwdCheck.value && this.value){
                 hasSuccess(this);
                 hasSuccess(this.form.pwdCheck);
              }else{
                 hasError(this);
                 hasError(this.form.pwdCheck);
              }
           });
           
           $("#pwdCheck").change(function(){
              if(this.value == this.form.uPass.value && this.value){
                 hasSuccess(this);
                 hasSuccess(this.form.uPass);
              }else{
                 hasError(this);
                 hasError(this.form.uPass);
              }
           });