25.회원가입유효성검사01

회원가입 유효성 검사 01

사용자가 입력해야 할 데이터를 잘못된 형식으로 입력하거나, 입력하지 않은 상태에서 버튼을 누를 경우 에러가 발생한다.

에러가 발생하지 않게 유효성 검사를 사용한다.

또한 가입하기 버튼을 누를 시 가입정보를 입력 해야 할 항목란에 빈 곳이 없는지 체크하기 위해 모든 유효성 검사를 한다.

순서

1.변수 선언하기

2.span태그 추가하기

1.변수 선언하기

유효성 검사 통과 유무를 위해서 변수를 선언해준다.

    
    //유효성 검사 통과 유무
    var idCheck = false; //아이디
    var idckCheck = false; //아이디 중복검사
    var pwCheck = false; //비밀번호
    var pwckCheck = false;//비밀번호확인
    var pwckcorCheck = false; //비밀번호일치확인
    var nameCheck = false; //이름
    var mailCheck = false;//이메일
    var mailnumCheck = false;//이메일 인증번호 확인
    var addressCheck = false;//주소

잘못 입력한 경우 false를 반환하는데 사용하기 위한 변수이다.

변수가 true 일떄 가입하기 메서드가 서버에 요청하도록 하기위해서 이다.

 

2.span 태그 추가하기

                        <div class="col-sm-6">
							<div class="form-group">
								<label for="reg-fn">이름</label> <input class="form-control user_input"
									type="text" name="name" required>
									<span class="final_name_ck">이름을 입력해주세요</span>
							</div>
						</div>

						<div class="col-sm-6">
							<div class="form-group">
								<div>

									<label for="reg-fn">아이디</label> 
										<input class="form-control id_input" type="text" name=id> 
										<span class="id_input_re_1">사용 가능한 아이디 입니다</span> 
										<span class="id_input_re_2">아이디가 이미 존재합니다</span>
										<span class="final_id_ck">아이디를 입력해주세요</span>
								</div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<label for="reg-pass">비밀번호</label>
								 <input class="form-control pw_input "type="password" name="pw" id="pw" onchange="check_pw()"autocomplete="off" required>
								 <span class="final_pw_ck">비밀번호를 입력해주세요</span>
							</div>
						</div>

						<div class="col-sm-6">
							<div class="form-group">
								<label for="reg-pass-confirm">비밀번호 확인</label> 
								<input class="form-control pwck_input" type="password"   id="pw2" onchange="check_pw()">&nbsp;<span id="check"></span>
								<span class="final_pwck_ck">비밀번호 확인을 입력해주세요</span>
								<span class="pwck_input_re_1">비밀번호가 일치합니다</span>
								<span class="pwck_input_re_2">비밀번호가 일치하지 않습니다</span>
							</div>
						</div>
					<div class="col-sm-12">
							<div class="form-group mail_input_box">
								 <label for="reg-pass">이메일</label> 
								<input class=" form-control mail_input"  name="email" required placeholder="ex)supermung123@gmail.com">
								<span class="final_mail_ck">이메일을 입력해주세요</span>
							   <span class="mail_input_box_warn"  style= "color:red;"></span>
							</div>
						</div>
						<div class="col-sm-12">
							<div class="form-group">
								<label for="reg-pass"></label>
								<input class="form-control address_input_3"  name="addr3" placeholder="상세주소를 입력하세요" >
								<span class="final_addr_ck">상세주소를 입력해주세요</span>
							</div>
						</div >

span 태그는 마지막 모든 유효성 검사를 할 떄 빈공간이 생길경우 경고하기 위한 역할을 한다.

span태그를 작성하고 final_id_Ck,final_pw_ck,final_pwck_ck,final_name_ck,final_mail_ck,final_addr_ck의 클래스를 작성한다.

• join.css

.final_id_ck{
	display:none;
	color:red;
}
.final_pw_ck{
	display:none;
	color:red;
}
.final_pwck_ck{
	display:none;
	color:red;
}
.final_name_ck{
	display:none;
	color:red;
}
.final_mail_ck{
	display:none;
	color:red;
}
.final_addr_ck{
	display:none;
	color:red;
}

span 태그가 보이지 않도록하고 join.css에 아래의 코드를 추가한다.