[자바스크립트] 회원가입페이지 정규표현식X

Web

[자바스크립트] 회원가입페이지 정규표현식X

dackyy 2022. 9. 14. 15:54

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>회원가입페이지</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body background="123.jpg">
<audio src="bgm.mp3" controls autoplay></audio>
<form method="post">
    <table width="800" height="600" border="1" align="center">
        <tr>
            <td align="center" colspan="3" style="background-color: lightskyblue; color: #000000">
                <B>회원 기본 정보</B>
            </td>
        </tr>
        <tr>
            <td align="center" style="background-color:darkgray">
                <B>아이디:</B></td>
            <td>
                <input type="text" name="id" id="id"> 4~12자의 영문 대소문자와 숫자로만 입력
            </td>
        </tr>
        <tr>
            <td align="center" style="background-color:darkgray">
                <B>비밀번호:</B></td>
            <td>
                <input id="password1" type = password name="password1"> 4~12자의 영문 대소문자와 숫자로만 입력
            </td>
        </tr>
        <tr>
            <td align="center" style="background-color:darkgray"><B>비밀번호확인:</B></td>
            <td>
                <input type=password id="password2" name="password2" >
            </td>
        </tr>
        <tr>
            <td align="center" style="background-color:darkgray"><B>메일주소:</B></td>
            <td>
                <input name="mail" id="mail" size="25"> 예) id@domain.com
            </td>
        </tr>
        <tr>
            <td align="center" style="background-color:darkgray">
                <B>이름:</B></td>
            <td>
                <input id="name" name="name" type="text" size="25">
            </td>
        <tr align="center">
            <td align="center" colspan="3" style="background-color: lightskyblue; color: black">
                <B>개인 신상 정보</B>
            </td>
        </tr>
        <tr>
            <td align="center" style="background-color:darkgray"><B>생일:</B></td>
            <td>
                <input name="info" value="" >년
                <select name="info">
                    <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option>
                </select>월
                <select name="info">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                </select>일
            </td>
        </tr>
        <tr>
            <td align="center" style="background-color:darkgray">
                <B>관심분야:</B></td>
            <td>
                <input type="checkbox" name="attention" value="컴퓨터">컴퓨터
                <input type="checkbox" name="attention" value="인터넷">인터넷
                <input type="checkbox" name="attention" value="여행">여행
                <input type="checkbox" name="attention" value="영화감상">영화감상
                <input type="checkbox" name="attention" value="음악감상">음악감상
            </td>
        </tr>
        <tr align="center">
            <td style="background-color:darkgray">
                <B>자기소개:</B></td>
            <td align="left" style="margin:0 0 0 0;">
                <textarea id="intro" cols="70" rows="10" style = "width:80%;height:90%"></textarea>
            </td>
        </tr>
    </table>
    <div align="center" style="margin-top:20px;">
        <button type="submit" onclick="allCheck()" value="회원 가입">
            <a class="at" style="text-decoration: none;color: black" href="mailto:dack1yy@gmail.com">회원가입</a>
        </button>
        <input align="center" type="reset" value="다시 입력">
    </div>
</form>
</body>
</html>

function allCheck() {
    if (idCheck() && pwCheck() && checkMail() && nameCheck() && checkInterest() && introCheck()){
        alert("회원가입을 축하합니다")
        return true;
    }
    else{
        document.querySelector(".at").removeAttribute('href');
        return false;
    }
}

function idCheck(){
    var id = document.getElementById("id");

    if(isAlphaNumeric(id.value) === false){
        alert("영문 대소문자와 숫자만 입력 가능합니다.");
        id.focus();
        id.value = "";
        return false;
    }

    else if(!(id.value.length > 3 && id.value.length < 13)){
        alert("4~12자로 내용을 입력하세요.");
        id.focus();
        id.value = "";
        return false;
    }
    else {
        return true;
    }
}

function pwCheck(){
    var pw1 = document.getElementById("password1");
    var pw2 = document.getElementById("password2");
    alert(document.getElementById("id").value)

    if (pw1.value === document.getElementById("id").value)
    {
        alert("아이디와 비밀번호가 같습니다")
        pw1.focus();
        pw1.value = "";
        pw2.value = "";
        return false;
    }

    else if (pw1.value.length < 4 || pw1.value.length > 12)
    {
        alert("비밀번호를 4~12자 내로 입력하세요.");
        pw1.focus();
        pw1.value = "";
        pw2.value = "";
        return false;
    }

    else if (pw1.value !== pw2.value){
        alert("비밀번호가 불일치 합니다");
        pw1.focus();
        pw1.value = "";
        pw2.value = "";
        return false;
    }

    else if (isAlphaNumeric(pw1.value) === false)
    {
        alert("영문 숫자로만 입력하세요");
        pw1.focus();
        pw1.value = "";
        pw2.value = "";
        return false;
    }

    else if (pw1.value == null || pw2.value == null){
        alert("비밀번호를 입력해주세요");
        pw1.focus();
        pw1.value = "";
        pw2.value = "";
        return false;
    }
    else return true;
}


function checkMail(){
    var mail = document.getElementById("mail");
    var indexAt = mail.value.indexOf("@");
    var indexDot = mail.value.indexOf(".");

    if (indexAt === -1){
        alert("이메일 형식을 확인해주세요");
        mail.focus();
        mail.value = "";
        return false;
    }
    if (indexDot === -1){
        alert("이메일 형식을 확인해주세요");
        mail.focus();
        mail.value = "";
        return false;
    }

    else if(isAlphaNumeric(mail.value.substr(0,indexAt)) === false){
        alert("특수문자를 빼주세요");
        mail.focus();
        mail.value = "";
        return false;
    }

    else if(isAlphaNumeric(mail.value.substr(indexAt+1,(indexDot-indexAt-1))) === false){
        alert("특수문자를 빼주세요");
        mail.focus();
        mail.value = "";
        return false;
    }

    else if(isAlphaNumeric(mail.value.substr(indexDot+1)) === false){
        alert("특수문자를 빼주세요");
        mail.focus();
        mail.value = "";
        return false;
    }
    else return true;
}

function nameCheck(){
    var name = document.getElementById("name");

    if (name.value == null){
        alert("이름을 입력해주세요");
        name.focus();
        name.value = "";
        return false;
    }
        // isKoreNumerics 함수는 한글을 판별해주는 유니코드 조건문임
    // 한글을 제외한 값이 들어오면
    else if(isKoreNumeric(name.value) === false){
        alert("한글을 입력해 주세요.");
        name.focus();
        name.value = "";
        return false;
    }
    else return true;
}

function checkInterest(){
    var interest = document.getElementsByName("attention")
    var cnt = 0;

    for(var i =0; i<interest.length; i ++){
        if(interest[i].checked){cnt++};
    }
    if (cnt === 0)
    {
        alert("관심분야를 체크해 주세요.")
        return false;
    }
    else return true;
}

function introCheck(){
    var intro = document.getElementById("intro");
    alert(intro.value);
    if(intro.value === null){
        alert("자기소개에 내용을 입력해주세요.");
        intro.focus();
        return false;
    }
    else return true;
}

function isKoreNumeric(str){
    var code;
    for(var i=0;i<str.length;i++){
        code = str.charCodeAt(i);

        if(!(code > 44031 && code < 55204) &&
            !(code > 12592 && code < 12623) &&
            !(code > 12622 && code < 12644)) {
            return false;
        }
    }
    return true;
}

function isAlphaNumeric(str){
    var code;
    for(var i=0;i<str.length;i++){
        code = str.charCodeAt(i);
        if(!(code > 47 && code < 58) &&
            !(code > 64 && code < 91) &&
            !(code > 96 && code < 123)) {
            return false;
        }
    }
    return true;
}