• 작성일 작성일 : 13-07-29 12:03 / 조회 : 12,931

jquery ui 를 이용한 회원가입

 글쓴이 : 외인 트위터 페이스북 미투데이 C공감

<pre>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” 

http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>

<title>jQuery 회원가입</title>

<style type=“text/css”>

    #jointable table{width:600px;}

    #jointable th{text-align: right; background-color:orange;}

    #jointable td input {border:1px solid seagreen;}

</style>

<link rel=“stylesheet” href=”<a href=“http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css” style=“padding: 0px; margin: 0px; outline: none; -webkit-transition: color 0.2s linear; transition: color 0.2s linear;”>http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css” />

<script type=“text/javascript” src=”<a href=“http://code.jquery.com/jquery-1.9.1.min.js” style=“padding: 0px; margin: 0px; outline: none; -webkit-transition: color 0.2s linear; transition: color 0.2s linear;”>http://code.jquery.com/jquery-1.9.1.min.js”></script>

<script type=“text/javascript” src=”<a href=“http://code.jquery.com/ui/1.9.2/jquery-ui.js” style=“padding: 0px; margin: 0px; outline: none; -webkit-transition: color 0.2s linear; transition: color 0.2s linear;”>http://code.jquery.com/ui/1.9.2/jquery-ui.js”></script>

<script type=“text/javascript” src=“jquery.ui.datepicker-ko.js”></script>

<script type=“text/javascript”>

    $(document).ready(function() {

 

    $(”#btn_join”).click(function() {

       

            var tel1_pattern = /(^01[016789]$)/; //정규식

 

            //alert(“ok”);

            if ($(”#id”).val() == “”) {

                alert(”아이디를 꼭 입력하세요!”);

                $(”#id”).focus();

            } else if ($(”#pwd”).val() == “”) {

                alert(”비밀번호를 꼭 입력하세요!”);

                $(”#pwd”).focus();

 

            } else if ($(”#pwd2”).val() == “”) {

                alert(”비밀번호확인 을 꼭 입력하세요!”);

                $(”#pwd2”).focus();

 

            } else if ($(”#pwd”).val() != $(”#pwd2”).val()) {

                alert(”비밀번호와 비밀번호 확인이 일치하지않습니다.”);

                $(”#pwd”).val(”“);

                $(”#pwd2”).val(”“);

                $(”#pwd1”).focus();

 

            } else if ($(”#name”).val() == “”) {

                alert(”이름을 꼭 입력하세요!”);

                $(”#name”).focus();

 

            } else if ($(”#tel1”).val() == “”) {

                alert(”전화번호 첫번째자리 입력하세요!”);

                $(”#tel1”).focus();

 

            } else if ($(”#tel1”).val().length != 3) {

 

                alert(”전화1을 3개의 숫자로 꼭 입력하세요!”);

                $(”#tel1”).val(”“);

                $(”#tel1”).focus();

 

            } else if (isNaN($(”#tel1”).val())) {

                alert(”전화1을 3개의 숫자로 꼭 입력하세요!”);

                $(”#tel1”).val(”“);

                $(”#tel1”).focus();

 

            } else if (!tel1_pattern.test($(”#tel1”).val())) {

                alert(“010, 011, 016, 017, 018, 019,o19만 가능합니다.”)

                $(”#tel1”).val(”“)

                $(”#tel1”).focus();

            }

            /*

            if($(”#tel1”).val() != “” & $(”#tel1”).val().length ==3 & !isNaN($(”#tel1”).val()) ){

            alert(“okkkkkkk”);

            var pattern = /(^01[016789]$)/; //정규식 슬래쉬(/)로 시작해서, 슬래쉬(/)로 끝났다.

            var tel1=$(”#tel1”).val();

            if(! pattern.test(tel1)){

            //틀리면

            alert(“010, 011, 016, 017, 018, 019,o19만 가능합니다.”)  

            $(”#tel”).val(”“)

            $(”#tel”).focus();

                   

                }

            }*/

 

            else if ($(”#tel2”).val() == “”) {

                alert(”전화번호 두번째자리를 입력하세요!”);

                $(”#tel2”).focus();

 

            } else if ($(”#tel1”).val().length != 3) {

 

                alert(”전화1을 3개의 숫자로 꼭 입력하세요!”);

                $(”#tel2”).val(”“);

                $(”#tel2”).focus();

 

            } else if (isNaN($(”#tel2”).val())) {

                alert(”전화2을 3~4개의 숫자로 꼭 입력하세요!”);

                $(”#tel2”).val(”“);

                $(”#tel2”).focus();

 

            } else if ($(”#tel2”).val() != “” & $(”#tel2”).val().length > 4 & isNaN($(”#tel2”).val())) {

                alert(“okkkkkkk”);

                var pattern = /(^01[016789]$)/; //정규식 슬래쉬(/)로 시작해서, 슬래쉬(/)로 끝났다.

                var tel1 = $(”#tel2”).val();

                if (!pattern.test(tel1)) {

                    //틀리면

                    alert(“010, 011, 016, 017, 018, 019,o19만 가능합니다.”)

                    $(”#te2”).val(”“)

                    $(”#te2”).focus();

 

                }

            }

 

            else if ($(”#tel3”).val() == “”) {

                alert(”전화번호 세번째자리를 입력하세요!”);

                $(”#tel3”).focus();

 

            } else if ($(”#addr”).val() == “”) {

                alert(”주소를 꼭 입력하세요!”);

                $(”#addr”).focus();

 

            } else if ($(”#birth”).val() == “”) {

                alert(”생일을  꼭 입력하세요!”);

                $(”#birth”).focus();

 

            } else if ($(”#job”).val() == “”) {

                alert(”직업을  꼭 선택하세요!”);

                $(”#job”).focus();

 

            } else if ($(”#man”).is(’:checked’) == false && $(”#woman”).is(’:checked’) == false) {

                alert(”남자또는 여자를  꼭 선택하세요!”);

            } else if ($(”#email”).val() == “”) {

                alert(”이메일을 꼭 입력하세요!”);

                $(”#email”).focus();

            } else if ($(”#intro”).val() == “”) {

                alert(”자기소개를 꼭 입력하세요!”);

                $(”#intro”).focus();

            } else {

                alert(“ok”);

            }

 

 

        });

 

        //$(”#birth”).datepicker();

        //$.datepicker.setDefaults( $.datepicker.regional[ “” ] );

        //$(”#birth”).datepicker($.datepicker.regional[“ko”]);

        $(”#birth”).datepicker(); 

 

    });

   

</script>

</head>

<body>

<h1>회원 가입</h1>

<!— 

 

id, pwd, name, tel, addr, birth, job, gender, email, intro

 

 —>

<form action=”“>

 

table>tr*11>th*1+td*1

<table id=“jointable”>

    <tr>

        <th>아이디</th>

        <td><input type=“text” name=“id” id=“id” size=“12” maxlength=“12” /></td>

    </tr>

    <tr>

        <th>비밀번호</th>

        <td><input type=“password” name=“pwd” id=“pwd” size=“12” maxlength=“12” /></td>

    </tr>

    <tr>

        <th>비밀번호확인</th>

        <td><input type=“password” name=“pwd2” id=“pwd2” size=“12” maxlength=“12” /></td>

    </tr>

    <tr>

        <th>이름</th>

        <td><input type=“text” name=“name” id=“name” size=“12” maxlength=“12” /></td>

    </tr>

    <tr>

        <th>전화번호</th>

        <td>

        <input type=“text” name=“tel1” id=“tel1” size=“3” maxlength=“3” />-

        <input type=“text” name=“tel2” id=“tel2” size=“4” maxlength=“4” />-

        <input type=“text” name=“tel3” id=“tel3” size=“4” maxlength=“4”/>

        </td>

    </tr>

    <tr>

        <th>주소</th>

        <td><input type=“text” name=“addr” id=“addr” maxlength=“100” /></td>

    </tr>

    <tr>

        <th>생일</th>

        <td>

       

        <input type=“text” id=“birth” size=“8” maxlength=“8” />

           

       

        </td>

    </tr>

    <tr>

        <th>직업</th>

        <td>

            <select id = “job”>

                <option value=”“>———

                <option value=”학생”>학생

                <option value=”직장인”>직장인

                <option value=”자영업”>자영업

                <option value=”주부”>주부

            </select>

       

        </td>

    </tr>

    <tr>

        <th>성별</th>

        <td>

            <input type=“radio” id=“man” name=“gender” value=“M” checked=“checked” >남자

            <input type=“radio” id=“woman” name=“gender” value=“W”>여자

        </td>

    </tr>

    <tr>

        <th>이메일</th>

        <td><input type=“text” name=“email” id=“email” size=“50” maxlength=“50” /></td>

    </tr>

    <tr>

        <th>자기소개</th>

        <td>

            <textarea rows=“5” cols=“40” id=“intro” name=“intro”></textarea>

        </td>

    </tr>

    <tr>

       

        <td colspan=“2”>

            <input type=“button” id=“btn_join” value=”가입”>

            <input type=“reset” id=“btn_cancel” value=”취소”>

        </td>

    </tr>

</table>

 

 

</form>

 

</body>

</html>

</pre>




  • 이전글 다음글
  • 목록
go top google+ page facebook tistory rss