회원가입 페이지 유효성 체크

정규식을 이용한 input태그값의 유효성 체크

1. 정규식의 test() 메소드를 이용함
   구문 : var BOOLEAN = 정규식.test("검사할문자열"); // 불린형 데이터를 반환

var reg_name = /^[가-힣]{2,20}$/;
var name = "러아저ㄴㄴㄴ";
alert(reg_name.test(name));

2. 각 데이터의 정규식

let reg_name = /^[가-힣]{2,20}$/;		//정확한 한글, 2~20자
let reg\_email = 
  /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;//이메일 형식
let reg_num = /[0-9]/g;				// 숫자를 포함한다
let reg_eng = /[a-z]/ig;			// 영문을 포함한다
let reg_spe = /[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi;	// 특수기호를 포함한다
let reg_spc = /\s/;				// 공백을 포함한다
let reg_phno = /^[0-9]{2,3}[0-9]{3,4}[0-9]{4}$/;// 전화번호 형식(-없이)

3. 정규식의 기본 문법에 대해 공부할 것.
4. 적용한 코드 예시(이름)

var checkName = function(){
	let reg_name = /^[가-힣]{2,20}$/;	//정확한 한글, 2~20자
	let reg_spc = /\s/;	// 공백은 있으면 안됨
	let name = document.getElementById("name").value;
	if( !( reg_name.test(name) && !reg_spc.test(name) ) ){
		document.getElementById("nameMsg").innerHTML = "정확한 이름을 입력하세요(2~20글자)";
		document.getElementById("nameMsg").style.display = "block";
		return false;
	}else{
		document.getElementById("nameMsg").style.display = "none";
		return true;
	}
}

<input onchange="checkName()" type="text" name="m_name" id="name" placeholder="이름"/>
<span class="error_next_box" id="nameMsg" style="display:none" aria-live="assertive"></span>

비밀번호 재확인

1. 비밀번호 재입력 input태그에서 oninput 이벤트에 다음과 같은 함수를 실행시키게 함.

<input type="password" name="m_pwd" id="pass" placeholder="비밀번호"/>
<input oninput="checkRePass()" type="password" name="re_pass" id="re_pass" placeholder="비밀번호확인"/>
<span class="error_next_box" id="re_passMsg" style="display:none" aria-live="assertive"></span>

var checkRePass = function(){
    let oPwd = document.getElementById("pass").value;
    let cPwd = document.getElementById("re_pass").value;
    if(cPwd != oPwd){
        document.getElementById("re_passMsg").innerHTML = "비밀번호가 일치하지 않습니다";
        document.getElementById("re_passMsg").style.display = "block";
      	return false;
    }else{
        document.getElementById("re_passMsg").style.display = "none";
        return true;
    }
}

1) 비밀번호 입력 input태그의 입력값과 재입력 input태그의 입력값을 비교함
2) oninput 이벤트를 이용해 일치하지않을 때, span태그가 나타나게 함
3) 일치할 경우, span태그가 사라지고, submit()을 할 수 있도록 boolean을 반환하도록 하였다.

form.submit() 실행하기

1. 모든 태그의 유효성을 체크하고 난 후, submit() 이 실행되도록 코딩.

<form method="POST" class="register-form" id="register-form" action="join.do">
	<input onclick="checkAll()" type="button" name="signup" id="signup" class="form-submit" value="가입하기"/>
</form>

var checkAll = function(){
    
	if(!checkName()){
		document.getElementById("name").focus();
	}else if(!checkEmail()){
		document.getElementById("email").focus();
	}else if(!checkPass()){
		document.getElementById("pass").focus();
	}else if(!checkRePass()){
		document.getElementById("re_pass").focus();
	}else if(!checkPhone()){
		document.getElementById("phone").focus();
	}else{
		document.getElementById("register-form").submit();
	}
}

2. 이 후, 로그인 페이지에서도 이 js파일을 이용해 유효성 체크를 적용함.