Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

moozi

form validation 예제 본문

TIS_2016/HTML5_1기

form validation 예제

moozi 2016. 3. 16. 14:32

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").show();
    });
   
    $("p").click(
        function(){
            $(this).hide();
        }
    );
   
     $("#userName").focus(function(){
        $(this).css("background-color", "#cccccc");
        // $(this).value("");
         document.form1.fullname.value="";
         document.getElementById("message1").innerHTML="이름을 입력하세요";
    });
   
    $("#userName").blur(
        function(){
            $(this).css("background-color", "#ffffff");         document.getElementById("message1").innerHTML="";
        }
   
    );
   
    $("#email").focus(function(){
        $(this).css("background-color", "#cccccc");
        //$(this).value("");
        document.form1.email.value="";
        document.getElementById("message2").innerHTML="email을 입력하세요";
    });
   
    $("#email").blur(
        function(){
            $(this).css("background-color", "#ffffff");         document.getElementById("message2").innerHTML="";
        }
   
    );
   
    $("#birth").focus(function(){
        $(this).css("background-color", "#cccccc");
        //$(this).value("");
        document.form1.birth.value="";
        document.getElementById("message0").innerHTML="생년월일을 입력하세요";
    });
   
    $("#birth").blur(
        function(){
            $(this).css("background-color", "#ffffff");         document.getElementById("message0").innerHTML="";
            var birth=document.form1.birth.value;
            if(isNaN(birth)==true){
             document.getElementById("message0").innerHTML="숫자로 입력하세요";
                document.getElementById("message0").style.color="#ff0000";
            }else if(birth.length!=8){
              document.getElementById("message0").innerHTML="8자리로 입력하세요";
                document.getElementById("message0").style.color="#ff0000";
            }
           
        }
   
    );
   
});
</script>


</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>
   
<br>
<form name="form1">
birth: <input id="birth" type="text" name="birth"><strong id="message0"></strong><br>
Name: <input id="userName" type="text" name="fullname"><strong id="message1"></strong><br>
    Email: <input id="email" type="text" name="email"><strong id="message2"></strong>
</form>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

</body>
</html>

'TIS_2016 > HTML5_1기' 카테고리의 다른 글

3/16 animation 예제 코드  (0) 2016.03.16
animation 샘플이미지  (0) 2016.03.16
영화 동주 이미지  (0) 2016.03.15
포트폴리오1차 제출  (17) 2016.03.14
구글맵 마커, infowindow 추가하기  (0) 2016.03.11
'TIS_2016/HTML5_1기' Related Articles more
Comments