고래씌

[JavaScript] 13. 정규표현식을 활용한 회원가입 폼 - 실습문제 본문

Front-End/JavaScript

[JavaScript] 13. 정규표현식을 활용한 회원가입 폼 - 실습문제

고래씌 2023. 11. 14. 14:31

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13_정규표현식을 활용한 회원가입폼</title>
    <style>
        form{
            border : 1px solid lightgray;
            padding : 20px;
        }

        label{
            color: gray;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <br>
    <form action="insert.me">
        * 아이디 : 
        <input type="text" name="userId" id="userId">  <br>
        <label>첫글자는 반드시 영문자로, 그리고 영문자, 숫자를 포함하여 총 4~12글자 입력하시오</label>
        <br><br>

        * 비밀번호 : 
        <input type="password" name="userPwd1" id="userPwd1"> <br>
        <label>영문자, 숫자, 특수문자(!@#$%^) 총 8~15글자로 입력하시오.</label>
        <br><br>

        * 비밀번호 확인 : 
        <input type="password" name="userPwd2" id="userPwd2"> <br>
        <label>위의 비밀번호와 일치하게 입력하시오.</label><br><br>

        * 이름 : 
        <input type="text" name="userName" id="userName"> <br>
        <label>한글로만 작성해야하며 2글자 이상으로 입력하시오</label><br><br>

        * 이메일 :
        <input type="email" name="email" id="email"> <br>
        <label>이메일 형식에 맞춰서 입력하시오</label><br><br>

        * 취미 : 
        <input type="text" name="hobby" id="hobby" placeholder="축구, 농구, 야구, 독서 등" list="hobbyList"> <br>
        <datalist id="hobbyList">
            <option>축구</option>
            <option>야구</option>
            <option>농구</option>
            <option>독서</option>
        </datalist>

        * 거주지 : 
        <select name="address" id="address">
            <option value="">선택안함</option>
            <option>서울</option>
            <option>부산</option>
            <option>경기</option>
            <option>인천</option>
        </select>

        <br><br>

        <input type="submit" value="회원가입" onclick="return vaildate();">
        <input type="reset" id="reset" value="취소">
    </form>

    <script>
        function vaildate() {
            // 1) 아이디 검사
            let regExp = /^[a-z][a-zA-Z0-9]{3,11}$/i;
            if(!regExp.test(userId.value)) {
                alert("유효한 아이디를 입력해주세요.");
                userId.select();
                return false;
            }

            // 2) 비밀번호 검사
            regExp = /^[a-z0-9!@#$%^]{8,15}/i;
            if(!regExp.test(userPwd1.value)){
                alert("유효한 비밀번호를 입력해주세요");
                userPwd1.value = "";
                userPwd1.focus();
                return false;
            }

            // 3) 비밀번호 일치여부 검사
            if(userPwd1.value != userPwd2.value){
                alert("동일한 비밀번호를 입력해주세요.");
                userPwd2.value = "";
                userPwd2.focus();
                return false;
            }

            // 4) 이름 검사
            // 한글로만 작성해야하며 2글자 이상으로 입력하시오
            regExp = /^[가-힣]{2,}$/;
            if(!regExp.test(userName.value)){
                alert("유효한 이름을 입력해주세요");
                userName.select();
                return false;
            }

            // 5) 값 입력검사(최소한 1글자이상 다 입력해야 회원가입이 가능하게끔)
            if(email.value.length == 0 || hobby.value.length == 0 || address.value.length == 0) {
                alert("필수 입력요소를 모두 입력해주세요.");
                return false;
            }

            alert("성공적으로 회원가입이 되셨습니다.");
            // 위 5가지 조건을 모두 만족한다면 회원가입 성공 메세지 출력 후 insert.me로 이동

            return true;
        }

    </script>
    
</body>
</html>

 

 

 

저작자표시 비영리 변경금지

'Front-End > JavaScript' 카테고리의 다른 글

[JavaScript] 12. 정규표현식  (0) 2023.11.14
[JavaScript] 함수_구매정보 검색 실습문제  (0) 2023.11.13
[JavaScript] 11. 이벤트(addEventListener, mouseenter.. 등)  (0) 2023.11.13
[JavaScript] 10. window 객체  (0) 2023.11.13
[JavaScript] 회원가입 - 실습문제3  (0) 2023.11.10
'Front-End/JavaScript' Related Articles more