인기포스트

ABOUT ME

Today
Yesterday
Total
  • [JS] 자바스크립트 유효성 검사
    WEB/JavaScript 2022. 9. 14. 10:55

    ver1. 정규표현식 사용 X

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table, th, td {
            border: 0.5px solid skyblue;
        }
    </style>
</head>
<body>
    <form action="mailto: iwebgenie@gmail.com?subject=안녕하세요">
        <table align ="center">
            <tr align ="center" bgcolor="skyblue">
                <td colspan = "3"><b>회원 기본 정보</b></td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">아이디:</td>
                <td><input id="id" type="text" minlength="4" maxlength="12" required> 4~12자의 영문 대소문자와 숫자로만 입력</td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">비밀번호:</td>
                <td><input id="password1" type="password" minlength="4" maxlength="12" required> 4~12자의 영문 대소문자와 숫자로만 입력</td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">비밀번호확인:</td>
                <td><input id="password2" type="password" minlength="4" maxlength="12" required></td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">메일주소:</td>
                <td><input id="email" type="email" required> 예) id@domain.com</td>
            </tr>
            <tr align ="center" bgcolor="skyblue">
                <td colspan = "3"><b>개인 신상 정보</b></td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">생일:</td>
                <td>
                    <input type="text" id="birth" minlength="4" maxlength="4" required>년
                    <select name="month">
                        <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="day">
                        <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" bgcolor="Silver" required>관심분야:</td>
                <td>
                    <input type="checkbox" name="inter">컴퓨터
                    <input type="checkbox" name="inter">인터넷
                    <input type="checkbox" name="inter">여행
                    <input type="checkbox" name="inter">영화감상
                    <input type="checkbox" name="inter">음악감상
                </td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">자기소개:</td>
                <td><textarea name="my" id="area" cols="60" rows="7" required></textarea></td>
            </tr>
        </table>
        <br>
        <div align="center">
            <input type="button" value="회원가입" onclick="sub(this)">
            <input type="reset" value="다시입력">
        </div>
    </form>
    <script src="index.js"></script>
</body>
</html>

     

     

    var arr = [];
var i = 0;
for(var j = 48; j < 58; j++){
    arr[i++] = j;
}
for(var j = 65; j < 91; j++){
    arr[i++] = j;
}
for(var j = 97; j < 124; j++){
    arr[i++] = j;
}

function sub(self){
    // ----------아이디----------
    var id = document.querySelector("#id");
    var value = id.value;
    var idArr = value.split("");

    if(idArr.length > 12 || idArr.length < 4){
        alert("아이디는 4~12자로 입력해주세요.");
        return;
    }

    if(check(idArr, "아이디") == false){ return }
    // ----------비밀번호----------
    var password1 = document.querySelector("#password1");
    value = password1.value;
    idArr = value.split("");

    if(idArr.length > 12 || idArr.length < 4){
        alert("비밀번호는 4~12자로 입력해주세요.");
        return;
    }

    if(check(idArr, "비밀번호") == false){ return }
    // ----------비밀번호 확인----------
    var password2 = document.querySelector("#password2");
    if(value != password2.value){
        alert("일치하지 않는 비밀번호 입니다.");
        return;
    }
    
    // ----------이메일----------
    var email = document.querySelector("#email");
    idArr = email.value.split("@");

    if(idArr.length != 2){
        alert("이메일 형식에 맞지 않습니다.");
        return
    }else{
        var first = idArr[0].split("");
        if(check(first, "이메일") == false){ return }

        idArr = idArr[1].split(".");
        if(idArr.length != 2){
            alert("이메일 형식에 맞지 않습니다.");
            return
        }else{
            if(idArr[0] == ""){
                alert("이메일 형식에 맞지 않습니다.");
                return
            }else{
                var second = idArr[0].split("");
                if(check2(second, "이메일") == false){ return }

                var third = idArr[1].split("");
                if(check2(third, "이메일") == false){ return }
            }
        }
    }
    // ----------생일----------
    var birth = document.querySelector("#birth");
    if(birth.value.length != 4){
        alert("년도는 4글자 숫자로 작성해주세요."); return;
    }

    idArr = birth.value.split("");
    var j = 0;
    var ascArr = [];    // 숫자 아스키코드
    for(var i = 48; i < 58; i++){
        ascArr[j] = i;
        j++;
    }
    if(check(idArr, "년도") == false){ return }
    // ----------관심분야----------
    var inter = document.getElementsByName("inter");
    var count = 0;
    for(var i = 0; i < inter.length; i++){
        if(inter[i].checked){ count++; }
    }
    if(count == 0){ alert("관심분야를 체크해주세요."); return;}

    // ----------자기소개----------
    var area = document.querySelector("#area");
    if(area.value.length < 11){
        alert("자기소개는 10글자 이상 작성해주세요."); return;
    }

    location.href = "mailto: iwebgenie@gmail.com?subject=안녕하세요";
}

function check(idArr, str){
    for(var i = 0 ; i < idArr.length; i++){
        var asc = idArr[i].charCodeAt(0);
        if(arr.indexOf(asc) == -1){ 
            alert(str + "형식에 맞지 않습니다.");
            return false;
        }
    }
}

function check2(idArr, str){
    var j = 0;
    var arr2 = [];    // 영어
    for(var i = 65; i < 91; i++){
        arr2[j] = i;
        j++;
    }
    for(var i = 97; i < 123; i++){
        arr2[j] = i;
        j++;
    }
    for(var i = 0 ; i < idArr.length; i++){
        var asc = idArr[i].charCodeAt(0);
        if(arr2.indexOf(asc) == -1){ 
            alert(str + "형식에 맞지 않습니다.");
            return false;
        }
    }
}

     

     

     

    ver2. 정규표현식 사용 O

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table, th, td {
            border: 0.5px solid skyblue;
        }
    </style>
</head>
<body>
    <form action="mailto: iwebgenie@gmail.com?subject=안녕하세요">
        <table align ="center">
            <tr align ="center" bgcolor="skyblue">
                <td colspan = "3"><b>회원 기본 정보</b></td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">아이디:</td>
                <td><input id="id" type="text" minlength="4" maxlength="12" required> 4~12자의 영문 대소문자와 숫자로만 입력</td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">비밀번호:</td>
                <td><input id="password1" type="password" minlength="4" maxlength="12" required> 4~12자의 영문 대소문자와 숫자로만 입력</td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">비밀번호확인:</td>
                <td><input id="password2" type="password" minlength="4" maxlength="12" required></td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">메일주소:</td>
                <td><input id="email" type="email" required> 예) id@domain.com</td>
            </tr>
            <tr align ="center" bgcolor="skyblue">
                <td colspan = "3"><b>개인 신상 정보</b></td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">생일:</td>
                <td>
                    <input type="text" id="birth" minlength="4" maxlength="4" required>년
                    <select name="month">
                        <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="day">
                        <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" bgcolor="Silver" required>관심분야:</td>
                <td>
                    <input type="checkbox" name="inter">컴퓨터
                    <input type="checkbox" name="inter">인터넷
                    <input type="checkbox" name="inter">여행
                    <input type="checkbox" name="inter">영화감상
                    <input type="checkbox" name="inter">음악감상
                </td>
            </tr>
            <tr>
                <td align ="center" bgcolor="Silver">자기소개:</td>
                <td><textarea name="my" id="area" cols="60" rows="7" required></textarea></td>
            </tr>
        </table>
        <br>
        <div align="center">
            <input type="button" value="회원가입" onclick="sub(this)">
            <input type="reset" value="다시입력">
        </div>
    </form>
    <script src="regular.js"></script>
</body>
</html>

     

     

    function sub(self){
    // ----------아이디----------    
    var id = document.querySelector("#id");
    var Regex = new RegExp(/^[a-zA-Z0-9]{4,12}$/);
    var result = Regex.test(id.value);
    if(result == false){
        alert("아이디는 4~12자의 영문 대소문자와 숫자로만 입력해주세요.");
        return
    }
    // ----------비밀번호----------
    var pass1 = document.querySelector("#password1");
    result = Regex.test(pass1.value);
    if(result == false){
        alert("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해주세요.");
        return
    }
    // ----------비밀번호확인----------
    var pass2 = document.querySelector("#password2");
    if(pass1.value != pass2.value){
        alert("일치하지 않는 비밀번호입니다.");
        return
    }
    // ----------이메일----------
    var email = document.querySelector("#email");
    // /a/i --a 가 있는 문자열, 대소문자 구분 안함
    // ?: 0 또는 1개의 문자 매칭, *: 0회 이상 반복
    Regex = new RegExp(/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i);
    result = Regex.test(email.value);
    if(result == false){
        alert("이메일 형식에 맞지 않습니다.");
        return
    }
    // ----------생일----------
    var birth = document.querySelector("#birth");
    Regex = new RegExp(/^[0-9]{4}$/);
    result = Regex.test(birth.value);
    if(result == false){
        alert("년도는 숫자 4자리로만 입력해주세요.");
        return
    }
    // ----------관심분야----------
    var inter = document.getElementsByName("inter");
    var count = 0;
    for(var i = 0; i < inter.length; i++){
        if(inter[i].checked){ count++; }
    }
    if(count == 0){ alert("관심분야를 체크해주세요."); return;}

    // ----------자기소개----------
    var area = document.querySelector("#area");
    if(area.value.length < 11){
        alert("자기소개는 10글자 이상 작성해주세요."); return;
    }
    location.href = "mailto: iwebgenie@gmail.com?subject=안녕하세요";
}
    728x90

    'WEB > JavaScript' 카테고리의 다른 글

    [JS] 자바스크립트 현재 시간 가져오기  (0) 2022.09.13
    [JS] 자바스크립트 계산기  (0) 2022.09.13
    [WEB] 자바스크립트 게시판 CRUD  (0) 2022.09.11

    관련글 관련글 더보기

Designed by Tistory.

티스토리툴바