VScode/JavaScript

[JavaScript] vaildation, select tag, visibility, check

hvoon 2022. 9. 8. 17:57

vaildation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>사용자등록</title>
    <style tyep="text/css">
        #wrap{width:970px; margin:0 auto;}
        h1{color:green;}
        table{width:100%; border-collapse:collapse; font-size:12px;
             line-height: 24px;}
        table td, th{border:#d3d3d3 solid 1px; padding:5px;}
        th{background:yellowgreen;}
    </style>
    <script type="text/javascript">
        function joinCheck(){
            if(document.frm.id.value==""){
                alert("아이디는 필수입력사항입니다");
                document.frm.id.focus(); // 포커스(커서)를 아이디 입력란으로 이동
                return false;
            } else if(document.frm.id.value.length<4){ // 입력한 글자수가 4글자 미만이라면 
                alert("아이디는 4글자 이상이어야 합니다");
                document.frm.id.focus();
                return false;
            } else if(document.frm.pwd.value==""){
                alert("비밀번호는 필수입력사항입니다");
                document.frm.pwd.focus(); 
                return false;
            } else if(document.frm.pwd.value != 
                      document.frm.pwd_check.value){
                alert("비밀번호와 비밀번호 확인이 일치하지 않습니다");
                document.frm.pwd_check.focus(); 
                return false;
            } else if(document.frm.name.value==""){
                alert("이름은 반드시 입력하여야 합니다");
                document.frm.name.focus(); 
                return false;
            } else if(document.frm.email.value==""){
                alert("이메일은 반드시 입력하여야 합니다");
                document.frm.email.focus(); 
                return false;
            } else{
                return true;
            }
        }
    </script>
</head>
<body>
<div id="wrap" align="center">
    <h1>사용자 등록</h1>
    <form name="frm" method="get" action="Result.html">
<!-- action이 실행되면 Result.html 파일로 이동함 -->
        <table>
            <tr><th>&nbsp;아이디</th>
                <td>&nbsp;<input type="text" size="20" name="id"/> *
                    &nbsp;<input type="button" value="중복체크">
                    <input type="hidden" name="re_id"></td></tr>
            <tr><th>비밀번호</th><td><input type="password" 
                                   name="pwd" size="20"></td></tr>
            <tr><th>비밀번호 확인</th><td><input type="password"  
                                   name="pwd_check" size="20"></td>
            </tr>
            <tr><th>이름</th><td><input type="text" name="name"  
                                   size="20"></td></tr>
            <tr><th>이메일</th><td><input type="text" name="email"  
                                   size="30"></td></tr>
            <tr><th>전화번호</th>
                <td><input type="text" name="phone1" size="5">-
                    <input type="text" name="phone2" size="7">-
                    <input type="text" name="phone3" size="7">
                </td></tr>
            <tr><td colspan="2" align="center"> * 는 필수 입력사항입니다
                </td></tr>
        </table><br><br>
        <input type="submit" value="등록" onclick="return  
         joinCheck()">
<!-- 
1. 등록버튼이 클릭되면 joincheck() 함수가 호출되고 실행됨 
2. 함수 이름 앞에 return은 joincheck() 함수가 리턴해주는 값으르 다시 form으로 리턴해줌
3. 함수에서 리턴된 값(true/false)이 다시 폼으로 리턴되어 action으로 이동할지 안할지를 결정함. 
   true가 리턴되면 action에 지정한 페이지로 이동을 계속하고 false가 리턴되면 action에 지정한 페이지로 이동하는 동작이 취소됨 
-->
        <input type="reset" value="다시 작성"><input type="butteon" 
         value="로그인페이지로">
    </form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Result.html</title>
</head>
<body>
    <h1>로그인 되었습니다</h1>
</body>
</html>


select tag, visibility

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SelectTag.html</title>
    <style type="text/css">
        #title{position:relative; width:200px; height:30px; 
               border:1px solid gray; line-height:30px;  
               font-size:120%; font-weight:bold;}
        #num{position:absolute; top:0; left:0; width:75px; 
             height:30px;}
        #arrow{position:absolute; width:25px; height:30px; 
               top:0; right:0; 
            background-image:url(images/ico_movie_171115.png); 
                                background-position:-275px -320px; 
                                overflow:hidden; }
        #dropMenu{position:absolute; top:30px; left:0; 
                  background:white; width:300px; height:250px;
                  border:1px solid #EEEEEE; 
                  box-shadow:2px 2px 5px gray; overflow-y:scroll;
                  overflow-x:hidden; visibility: hidden;}
        #dropMenu div{font-weight:bold; height:45px; width:100%; 
                      line-height:45px; }
        #dropMenu div:hover{background:#888888; color:white;}
    </style>
    <script type="text/javascript">
        var menuState=false;
        function clickTitle(){
            if(menuState==false){
                menuState=true;
                document.getElementById("dropMenu").style.visibility=
                                                            'visible';
            } else{
                menuState=false;
                document.getElementById("dropMenu").style.visibility=
                                                            'hidden';
            }
        }
        function selectMenu(x){
            document.getElementById("num").innerHTML="&nbsp;+"+x;
            // document.getElementById("dropMenu").style.visibility=
                                                            'hidden';
            // menuState=false;
        }
    </script>
</head>
<body>
    <select>
        <option>대한민국 +82</option>
        <option>그리스 +30</option>
        <option>뉴질랜드 +64</option>
        <option>프랑스 +33</option>
    </select>
    <hr>
        <div id="title" onclick="clickTitle();">
            <div id="num">&nbsp;+82</div>
            <div id="arrow"></div>
            <div id="dropMenu">
                <div onclick="selectMenu(1)">+1 &nbsp;&nbsp;&nbsp;&nbsp; Canada</div>
                <div onclick="selectMenu(1)">+1 &nbsp;&nbsp;&nbsp;&nbsp; United States</div>
                <div onclick="selectMenu(63)">+63 &nbsp;&nbsp;&nbsp; Philppines</div>
                <div onclick="selectMenu(62)">+62 &nbsp;&nbsp;&nbsp; Indonesia</div>
                <div onclick="selectMenu(84)">+84 &nbsp;&nbsp;&nbsp; Vietnam</div>
                <div onclick="selectMenu(55)">+55 &nbsp;&nbsp;&nbsp; Brazil</div>
                <div onclick="selectMenu(86)">+86 &nbsp;&nbsp;&nbsp; China</div>
                <div onclick="selectMenu(85)">+85 &nbsp;&nbsp;&nbsp; HongKong</div>
                <div onclick="selectMenu(82)">+82 &nbsp;&nbsp;&nbsp; Korea</div>
            </div>
        </div>
</body>
</html>


 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Check_Radio.html</title>
    <style type="text/css">
        img{ vertical-align: middle;}
    </style>
    <script type="text/javascript">
        var selectIndex = 0;
        var selectIndexes = [0 , 0 , 0];
        function selectRadio(x){
            var rb = document.getElementsByClassName('gender');
            //document.getElementById("r1").src = "images/radio2.jpg";
            //document.getElementById("r2").src = "images/radio2.jpg";
            for( var i=1; i<=2; i++){
                document.getElementById("r"+ i).src = "images/radio2.jpg";
                // rb[i-1].src = "images/radio2.jpg";
            }
            document.getElementById("r" + x).src = "images/radio1.jpg";
            //rb[x-1].src = "images/radio1.jpg";
            document.getElementById("val").value = x;
        }
        function selectCheck(x){
            if( selectIndexes[x-1] == 0 ){
                document.getElementById("c" + x).src = "images/check1.jpg";
                selectIndexes[x-1] = 1;
            } else{
                document.getElementById("c" + x).src = "images/check2.jpg";
                selectIndexes[x-1] = 0;
            }
            var str = "";
            for(var i=0; i<3; i++){
                if( selectIndexes[i]==1 )
                    str += i + " ";
            }
            document.getElementById("val2").value = str;
        }
    </script>
</head>
<body>
    <table width="500" bgcolor="black" cellspacing="1">
        <tr bgcolor="white" height="70">
            <th width="150">성별</th>
            <td width="350">남성&nbsp;<img src="images/radio2.jpg" id="r1" class="gender" onclick="selectRadio(1);">&nbsp;&nbsp;&nbsp;여성&nbsp;<img src="images/radio2.jpg" id="r2" onclick="selectRadio(2);" class="gender">&nbsp;&nbsp;&nbsp;<input type="text" id="val"></td>
        </tr>
        <tr bgcolor="white" height="70">
            <th width="150">취미</th>
            <td width="350">스포츠&nbsp;<img src="images/check2.jpg" id="c1" onclick="selectCheck(1);" class="hobby" >&nbsp;&nbsp;&nbsp;영화&nbsp;<img src="images/check2.jpg" id="c2" onclick="selectCheck(2);" class="hobby" >&nbsp;&nbsp;&nbsp;독서&nbsp;<img src="images/check2.jpg" id="c3" onclick="selectCheck(3);" class="hobby" >&nbsp;&nbsp;&nbsp;<input type="text" id="val2"></td>
        </tr>
    </table>
</body>
</html>