본문 바로가기
jQuery

[jQuery] input 이벤트

사악미소 2015. 12. 29. 00:38
반응형

[jQuery] input 이벤트



 inputEvent-1.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>입력폼 이벤트</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#id").focus();
       
        // focusout : 커서가 벗어나기 전에 호출되는 이벤트
        jQuery("#id").focusout(function() {
            if(jQuery("#id").val() == "") {
                alert("아이디를 입력해 주세요.");
                jQuery("#id").focus();
            }
        });
       
        jQuery("#submitBtn").click(function() {

            if($("#id").val() == "") {
                alert("아이디를 입력해 주세요.");
                jQuery("#id").focus();
                return;
            }
           
            // 아이디 작성규칙에 대한 유효성 검사
            var idReg=/^[a-zA-Z]+[a-zA-Z0-9_]{5,19}$/g; // 정규표현식
           
            if(!idReg.test(jQuery("#id").val())) {

                alert("아이디는 영문자, 숫자, _로만 입력가능합니다.");
                jQuery("#id").focus();
                return;
            }
           
            if(jQuery("#passwd").val() == "") {
               
                alert("비밀번호를 입력해 주세요.");
                jQuery("#passwd").focus();
                return;
            }
           
            if(jQuery("#name").val() == "") {
                alert("이름을 입력해 주세요.");
                jQuery("#name").focus();
                return;
            }
           
            if(jQuery("#address").val() == "") {
               
                alert("주소를 입력해 주세요.");
                jQuery("#address").focus();
                return;
            }
           
            jQuery("#inputForm").attr("method", "post");
            jQuery("#inputForm").attr("action", "");
            jQuery("#inputForm").submit();
        });
       
        jQuery("#resetBtn").click(function(){
            jQuery("#inputForm")[0].reset();
            jQuery("#id").focus();
        });
    });
</script>
</head>
<body>
    <h1>입력폼 이벤트</h1>
    <hr/>
    <form id="inputForm">
        <fieldset>
            <legend>회원가입 정보</legend>
            <ul>
                <li>
                    <label for="id">아이디</label>
                    <input type="text" id="id">
                </li>
                <li>
                    <label for="passwd">비밀번호</label>
                    <input type="password" id="passwd">
                </li>
                <li>
                    <label for="name">이름</label>
                    <input type="text" id="name">
                </li>
                <li>
                    <label for="address">주소</label>
                    <input type="text" id="address">
                </li>
            </ul>
        </fieldset>
        <fieldset id="buttonFS">
            <button type="button" id="submitBtn">회원가입</button>
            <button type="button" id="resetBtn">다시입력</button>
        </fieldset>
    </form>
</body>
</html>

 출력결과




 inputEvent-2.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>입력폼 이벤트</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        jQuery("#id").focus();
       
        // submit : submit 버튼을 누른 경우 발생하는 이벤트
        jQuery("#inputForm").submit(function() {

            if(jQuery("#id").val() == "") {

                alert("아이디를 입력해 주세요.");
                jQuery("#id").focus();
                return false;
            }
           
            // 아이디 작성규칙에 대한 유효성 검사
            var idReg=/^[a-zA-Z]+[a-zA-Z0-9_]{5,19}$/g; // 정규표현식

            if(!idReg.test(jQuery("#id").val())) {

                alert("아이디는 영문자, 숫자, _로만 입력가능합니다.");
                jQuery("#id").focus();
                return false;
            }
           
            if(jQuery("#passwd").val() == "") {

                alert("비밀번호를 입력해 주세요.");
                $("#passwd").focus();
                return false;
            }
           
            if(jQuery("#name").val() == "") {
                alert("이름을 입력해 주세요.");
                jQuery("#name").focus();
                return false;
            }
           
            if(jQuery("#address").val()=="") {
                alert("주소를 입력해 주세요.");
                jQuery("#address").focus();
                return false;
            }
           
            jQuery("#inputForm").attr("method", "post");
            jQuery("#inputForm").attr("action", "");
        });
    });
</script>
</head>
<body>
    <h1>입력폼 이벤트</h1>
    <hr/>
    <form id="inputForm">
        <fieldset>
            <legend>회원가입 정보</legend>
            <ul>
                <li>
                    <label for="id">아이디</label>
                    <input type="text" id="id">
                </li>
                <li>
                    <label for="passwd">비밀번호</label>
                    <input type="password" id="passwd">
                </li>
                <li>
                    <label for="name">이름</label>
                    <input type="text" id="name">
                </li>
                <li>
                    <label for="address">주소</label>
                    <input type="text" id="address">
                </li>
            </ul>
        </fieldset>
        <fieldset id="buttonFS">
            <button type="submit">회원가입</button>
            <button type="reset">다시입력</button><!-- reset 타입은 입력된 모든 값(value)를 제거한다. -->
        </fieldset>
    </form>
</body>
</html>
 출력결과



 inputEvent-3.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>입력폼 이벤트</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        jQuery("#id").focus();
       
        // submit : submit 버튼을 누른 경우 발생하는 이벤트
        jQuery("#inputForm").submit(function() {

            var notNull = jQuery("#inputForm").find("[notNull='true']");    // find : 일치하는 모든 요소를 찾아온다.

            for(var i=0; i < notNull.length; i++) {

                if(notNull.eq(i).val() == "") {

                    alert(notNull.eq(i).attr("print") + "를(을) 입력해 주세요.");
                    notNull.eq(i).focus();
                    return false;
                }
            }
           
            // 아이디 작성규칙에 대한 유효성 검사
            var idReg=/^[a-zA-Z]+[a-zA-Z0-9_]{5,19}$/g; // 정규표현식
            if(!idReg.test($("#id").val())) {

                alert("아이디는 영문자,숫자,_로만 입력가능합니다.");
                jQuery("#id").focus();
                return false;
            }
           
            jQuery("#inputForm").attr("method", "post");
            jQuery("#inputForm").attr("action", "");
        });
    });
</script>
</head>
<body>
    <h1>입력폼 이벤트</h1>
    <hr/>
    <form id="inputForm">
        <fieldset>
            <legend>회원가입 정보</legend>
            <ul>
                <li>
                    <label for="id">아이디</label>
                    <input type="text" id="id" notNull="true" print="아이디">
                </li>
                <li>
                    <label for="passwd">비밀번호</label>
                    <input type="password" id="passwd" notNull="true" print="비밀번호">
                </li>
                <li>
                    <label for="name">이름</label>
                    <input type="text" id="name" notNull="true" print="이름">
                </li>
                <li>
                    <label for="address">주소</label>
                    <input type="text" id="address" notNull="true" print="주소">
                </li>
            </ul>
        </fieldset>
        <fieldset id="buttonFS">
            <button type="submit">회원가입</button>
            <button type="reset">다시입력</button>
        </fieldset>
    </form>
</body>
</html>
 출력결과






반응형
저작자표시

'jQuery' 카테고리의 다른 글

[jQuery] 무한 스크롤 이벤트  (0) 2016.01.03
[jQueyr] On / Off 이벤트  (0) 2016.01.03
[jQuery] checkbox 이벤트  (1) 2015.12.29
[jQuery] jQuery 엘리먼트  (0) 2015.12.28
[jQuery] jQuesy 이벤트  (0) 2015.12.20

'jQuery' Related Articles

티스토리툴바