[JS] 유효성 검사

아이디와 비밀번호를 입력하는 인풋이 있다고 가정할 때

생성 조건을 걸어서 유효성 검사를 할 수 있습니다.

이번 시간에는 유효성 검사하는 로직을 구현해볼까 합니다.

 

먼저 form과 Input 뼈대를 만들어보겠습니다.

 

<form action = "ㅋㅋㅋ" name = "ff" onsubmit="return checkValid();">

ID : <input name = "idd" maxlength="10" autofocus> <p>

PW : <input name = "pwpw" maxlength="10" autofocus> <p>

PW Check : <input name = "pwchk" maxlength="10" autofocus> <p>

Foot Size : <input name = "foot"> <p>

<hr>

<button>입력</button>

</form>

 

아이디, 비밀번호, 확인용 비밀번호, 발사이즈를 입력받을 것입니다.

이때 버튼을 눌러서 제출을 하면

onSubmit 기능을 사용해서

checkValid함수를 불러와서 유효성 검사를 하려고합니다.

 

그러면 checkValid함수를 구현해보겠습니다.

function checkValid(){

let idInput = document.ff.idd;

let pwInput = document.ff.pwpw;

let pwchkInput = document.ff.pwchk;

let footInput = document.ff.foot;

 

먼저 input으로 받아온 데이터들을 저장해놓을 수 있는 변수를 만들어줍니다.

 

if(!idInput.value){

alert("님 ID 안씀 ㅋ");

idInput.focus();

return false;

 

ID 변수의 값이 없다면 false를 반환하고

경고창을 띄웁니다.

그리고 focus를 사용해서

ID로 포인터가 focus되게합니다.

 

}else if(idInput.value.length < 5){

alert("ID는 5~10글자 !");

idInput.focus();

idInput.value = ""; 

return false;

}

 

ID 데이터 값의 길이가 5보다 작다면

ID의 데이터를 비우고

false를 반환합니다.

 

 

 

if(!pwInput.value){

alert("님 PW 안씀 ㅋ");

pwInput.focus();

return false;

 

마찬가지로 비밀번호가 입력되었는지 확인합니다.

 

}else if(pwInput.value.length < 5){

alert("PW는 5~10글자 !");

pwInput.focus();

pwInput.value = ""; 

return false;

}

 

비밀번호의 길이를 확인합니다.

if((pwInput.value.indexOf("3") == -1

&& pwInput.value.indexOf("6") == -1 && pwInput.value.indexOf("9") == -1))

{

alert("비밀번호에 3, 6, 9 중 하나를 포함시켜야 합니다!");

pwInput.focus();

return false}

 

indexOf라는 기능은 요소의 자리수를 반환하는데

요소가 들어있지 않다면 -1을 반환합니다.

이 점을 이용해서 비밀번호에 3, 6, 9가 들어있지 않다면(And 연산자)

경고창을 띄웁니다.

 

 

 

if(pwInput.value.indexOf("h") == -1

&& pwInput.value.indexOf("k") == -1)

{

alert("비밀번호에 h,k 중 하나를 포함시켜야 합니다!");

pwInput.focus();

return false;

 

}

마찬가지로 h와 k가 들어있는지 확인합니다.

 

if(!pwchkInput.value){

alert("님 확인용 PW 안씀 ㅋ");

pwchkInput.focus();

return false;

 

}

 

확인용 비밀번호가 들어있는지 확인합니다.

 

else if((pwInput.value != pwchkInput.value)){

alert("비밀번호와 확인용 비밀번호가 일치하지 않음!")

pwchkInput.focus();

pwchkInput.value = "";

return false;

}

 

비밀번호와 확인용 비밀번호가 일치하는지 확인합니다.

 

if(!footInput.value){

alert("발 사이즈를 입력해야함!");

footInput.focus();

return false;

 

}

 

마찬가지로 발사이즈가 들어왔는지 확인하고

 

else if(isNaN(footInput.value)){

alert("발사이즈는 숫자만 들어가야 함!")

footInput.value = "";

footInput.focus();

return false;

}

 

isNaN 기능(Number가 아니라면 true 맞으면 false반환) 을 써서

발사이즈가 숫자만 들어오게 합니다.

 

return true;

}

 

 

로그인의 유효성 검사를 하는 로직을 구현해봤습니다.