회원가입 유효성검사 ( 1 )

bi_sz·2020년 5월 29일
3

과제

목록 보기
4/6

한번에는 못 끝낼거 같아서 ( 1 ) 으로 했다ㅏ,,

수업시간에 쓰던 코드를 변형해서 만들고 싶었는데
중간에 오류가 뜨고 , 그 이후 속도를 따라잡지 못해서 새로 시작하기로 했다.


우선 틀을 만들어 주었다.

<html>
<head><title>Register With Us</title></head>
<body>
<form id="bi">
     <label for="name">Username</label><br />
        <input type="text" name="name" id="name" /><br />
    <label for="name">Email</label><br />
        <input type="text" name="email" id="email" /><br />
        <label for="pass">Password</label><br />
        <input type="password" name="pass" id="pass" /><br />
        <label for="pass-check">Confirm Password</label><br />
        <input type="password" id="pass2" /><br />
        <input type="submit" id ="sumit" value="SUMIT" />
    </form>
</body>
</html>


input 값을 확인하는 함수를 호출하는 checkAll( ) 함수를 만들었다.

function checkAll() {
        if (!checkMail(form.mail.value)) {
            return false;
        } else if  (!checkPassword(form.pass.value,
            form.pass2.value)) {
           	return false;
        }
        return true;
    }

checkMail 함수에서 폼에 입력된 값이 유효성 검사에 맞으면 true 를 return 해준다.

if 조건문 내로 들어가지 않으므로 다음 조건문을 실행하게 된다.

아래의 else if문도 마찬가지로 똑같이 수행한다.

함수의 매개변수로는 form 내에 있는 해당되는 input 태그의 id 의 값을 가져온다.


공백 확인 함수

function checkExistData(value, dataName) {
   if (value == "") {
       alert(dataName + " 입력해주세요");
       return false;
   }
   return true;
}

매개변수로 들어오는 value 는 input 태그의 값이고
dataName 은 해당되는 input 태그의 종류가 무엇인지 알려주는 String 변수이다.

값이 공백일 경우 alert 를 통해 공백임을 알리고
false 를 return 하면서 이 함수를 호출한 함수를 끝내버린다.


이메일 확인 함수

function checkMail(email) {
        //mail이 입력되었는지 확인하기
        if (!checkExistData(email, "이메일을"))
            return false;
        var emailRegExp = /^[A-Za-z0-9_]+[A-Za-z0-9]
        *[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;
        if (!emailRegExp.test(email)) {
            alert("이메일 형식이 올바르지 않습니다");
            form.email.value = "";
            form.email.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }

이메일 정규표현식

1. ^[A-Za-z0-9_]+[A-Za-z0-9]

  • 이메일의 경우 첫글자 _가 허용되므로 첫번째 글자 검사식을 따로 둔다.

  • 그 뒤 영문 대/소문자 숫자만 사용 할 수 있게 조건을 건다.

2. * [ @ ] { 1 } : @는 반드시 하나만 입력되어야 한다.

3. * [ . ] { 1 } : .은 반드시 하나만 입력되어야 한다.

4. [A-Za-z]{1,3} : 최소 한글자 최대 세글자 까지 입력 가능하다.

정규표현식과 이메일의 값이 일치하지 않을 경우 조건문을 실행하며,
이메일 값이 정규표현식에 만족할 경우 return true 된다.


비밀번호 확인 함수

 function checkPassword(id, passw, pass2) {
        //비밀번호가 입력되었는지 확인하기
        if (!checkExistData(pass, "비밀번호를"))
            return false;
        //비밀번호 확인이 입력되었는지 확인하기
        if (!checkExistData(pass2, "비밀번호 확인을"))
            return false;
        var password1RegExp = /^[a-zA-z0-9]{4,12}$/; 
        //비밀번호 유효성 검사
        if (!password1RegExp.test(pass)) {
            alert("비밀번호는 영문 대소문자와 
            숫자 4~12자리로 입력해야합니다");
            form.pass.value = "";
            form.pass.focus();
            return false;
        }
        //비밀번호와 비밀번호 확인이 맞지 않다면..
        if (pass != pass2) {
            alert("두 비밀번호가 맞지 않습니다.");
            form.pass.value = "";
            form.pass2.value = "";
            form.pass2.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }    

비밀번호가 만족해야할 조건

  • 영문 대/소문자와 숫자 4~12자리로 입력할 것

  • 비밀번호 두번 입력했을 때 두번 다 일치할 것


, ,, ,,

1개의 댓글

comment-user-thumbnail
2020년 5월 29일

사진에 있는거 headers를 header로 바꾸면 작동하실듯합니다.

답글 달기