여행

it/JavaScript 2014. 8. 19. 14:07 Posted by 하얀나다

textfieldcss_travel.htm


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>◆◆  Travel Sketch  ◆◆</title>

<script type="text/javascript" src="js/formCheck.js">


</script>


<style type="text/css">


<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

.text4 {

font-size: 12px;

font-family: "굴림", "굴림체";

color: #333333;

}

.text2 {

font-size: 11px;

color: #FF6633;

}

.text1 {font-size: 11px; font-family: "굴림", "굴림체"; color: #333333; }

.text3 {

font-size: 11px;

font-family: "굴림", "굴림체";

color: #00769D;

font-weight: bold;

}

-->

</style>

</head>


<body>

<form name="frm" >

<table width="800" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td><img src="img/travel_01.gif" width="800" height="102" /></td>

  </tr>

  <tr>

    <td height="33" background="img/travel_02.gif">&nbsp;</td>

  </tr>

</table>

<table width="800" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td width="233" valign="top"><table width="233" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td><img src="img/travel_reservation_01.gif" width="233" height="624" /></td>

      </tr>

      

    </table></td>

    <td width="567" valign="top"><table width="567" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td width="26" height="35">&nbsp;</td>

        <td height="35"><img src="img/travel_reservation_02.gif" width="515" height="35" /></td>

        <td width="26" height="35">&nbsp;</td>

      </tr>

      <tr>

        <td width="26">&nbsp;</td>

        <td valign="top"><table width="515" border="0" cellspacing="0" cellpadding="0">

          <tr>

            <td height="10" colspan="2"></td>

            </tr>

          <tr>

            <td width="20">&nbsp;</td>

            <td><img src="img/travel_reservation_03.gif" width="111" height="20" /></td>

            </tr>

          <tr>

            <td width="20" height="100">&nbsp;</td>

            <td height="100"><table width="540" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC">

              <tr>

                <td width="110" height="25" bgcolor="#F7F7F7"> <div align="center"><span class="text1">성인(만12세이상)</span></div></td>

                <td width="190" height="25" bgcolor="#FFFFFF">

                  <label>

                    <input name="adult" type="text" id="adult" size="2"  onblur="JavaScript:checkPeople( )"/>

                    </label>

                  <span class="text4">명 <span class="text2">[1인당 39.000.000원]</span></span></td>

                <td width="80" height="25" rowspan="3" bgcolor="#F7F7F7"><div align="center"><span class="text1">상품합계금액</span></div></td>

                <td width="100" height="25" rowspan="3" bgcolor="#FFFFFF"><span class="text4">=</span>

                  <input name="price" type="text" id="price" value="0원" size="10" /></td>

              </tr>

              <tr>

                <td width="110" height="25" bgcolor="#F7F7F7"><div align="center"><span class="text1">아동(만12세미만)</span></div></td>

                <td width="190" height="25" bgcolor="#FFFFFF"><input name="child" type="text" id="child" size="2" onblur="JavaScript:checkPeople( )"/>

                 <span class="text4">명</span><span class="text4"> <span class="text2">[1인당 29.000.000원]</span></span> </td>

                </tr>

              <tr>

                <td width="110" height="25" bgcolor="#F7F7F7"><div align="center"><span class="text1">유아(만 2세이상)</span></div></td>

                <td width="190" height="25" bgcolor="#FFFFFF"><input name="toddler" type="text" id="toddler" size="2" onblur="JavaScript:checkPeople( )"/>

                 <span class="text4">명 <span class="text2">[1인당 19.000.000원]</span></span></td>

                </tr>

            </table></td>

            </tr>

          <tr>

            <td width="20" height="40">&nbsp;</td>

            <td height="40"><table width="540" border="0" cellpadding="0" cellspacing="1" bgcolor="#8FCBD8">

              <tr>

                <td height="30" bgcolor="#D0EDF3"><div align="center"><span class="text3">혼자 객실을 이용시 싱글 추가요금, 또는 추가사항에 따라서 추가요금이 발생합니다.</span></div></td>

              </tr>

            </table></td>

            </tr>

          <tr>

            <td width="20" height="50" valign="top">&nbsp;</td>

            <td height="50" valign="top"><div align="center" class="text1">

                  <label>

                  <input type="checkbox" name="agree" id="agree" />

                  </label>

              여행약관에 동의합니다. 

              <input type="checkbox" name="agree1" id="agree1" />

              개인정보보호정책에동의합니다.</div></td>

            </tr>

          <tr>

            <td width="20">&nbsp;</td>

            <td><img src="img/travel_reservation_04.gif" width="111" height="20" /></td>

            </tr>

          <tr>

            <td width="20">&nbsp;</td>

            <td><table width="560" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC">

              <tr>

                <td width="80" height="25" bgcolor="F7F7F7"><span class="text1">한글이름</span></td>

                <td width="170" height="25" bgcolor="#FFFFFF"><input name="korname" type="text" id="korname" size="8" onblur="JavaScript:checkKorName( )"/>

                <label>

                  <input name="radio" type="radio" id="gender" value="gender" checked>

                  <span class="text1">남자</span>                      </label>

                  <span class="text1">

                  <input type="radio" name="radio" id="gender" value="gender" />

                    여자                    </span></td>

                <td width="80" height="25" bgcolor="F7F7F7" class="text1">영문성/이름</td>

                <td width="170" height="25" bgcolor="#FFFFFF"><input name="engname" type="text" id="engname" size="8" />

                  <span class="text1">/</span>

                    <input name="engname1" type="text" id="engname1" size="8" onblur="JavaScript:checkEngName( )"/></td>

              </tr>

              <tr>

                <td width="80" height="25" bgcolor="F7F7F7"><span class="text1">연령기준</span></td>

                <td width="170" height="25" bgcolor="#FFFFFF">

                  <label>

                    <select name="select" class="text1" id="age">

                      <option>연령기준선택</option>

                      <script>

for (var i=1; i<=80; i++)

{

document.write("<option>"+i);

}

</script>

                    </select>

                    </label>                </td>

                <td width="80" height="25" bgcolor="F7F7F7" class="text1">주민번호</td>

                <td width="170" height="25" bgcolor="#FFFFFF"><input name="jumin1" type="text" id="jumin1" size="8" maxlength="6"/>

                  <span class="text1">                  -</span>

                    <input name="jumin2" type="text" id="jumin2" size="8" maxlength="7" onblur="JavaScript:checkJumin( )"/></td>

              </tr>

              <tr>

                <td width="80" height="25" bgcolor="F7F7F7"><span class="text1">전화번호</span></td>

                <td width="170" height="25" bgcolor="#FFFFFF"><input name="tel1" type="text" id="tel1" size="3" />

                  <span class="text1">                  - 

                  <input name="tel2" type="text" id="tel2" size="5" />

                      -

                      <input name="tel3" type="text" id="tel3" size="5" onblur="JavaScript:checkTel( )"/>

                  </span></td>

                <td width="80" height="25" bgcolor="F7F7F7" class="text1">이메일주소</td>

                <td width="170" height="25" bgcolor="#FFFFFF"><input name="email" type="text" id="email" size="18" onblur="JavaScript:checkEmail( )"/></td>

              </tr>

              <tr>

                <td width="80" height="25" bgcolor="F7F7F7"><span class="text1">여권관련정보</span></td>

                <td height="25" colspan="3" bgcolor="#FFFFFF"><select name="passport" class="text1" id="passport">

                  <option>:::여권유무:::</option>

                  <option>유</option>

                  <option>무</option>

                                                </select> 

                  <span class="text1">여권번호 

                  <input name="passportnum" type="text" id="passportnum" size="12" />

                  여권만료일 

                  <input name="passportdate" type="text" id="passportdate" size="12" />

                  </span></td>

                </tr>

              <tr>

                <td width="80" height="25" bgcolor="F7F7F7"><span class="text1">비자관련정보</span></td>

                <td height="25" colspan="3" bgcolor="#FFFFFF"><select name="visa" class="text1" id="visa">

                  <option>:::비자유무:::</option>

                  <option>유</option>

                  <option>무</option>

                                                </select> 

                  <span class="text1">비자만료일</span> <span class="text1">

                  <input name="visadate" type="text" id="visadate" size="12" />

                  </span></td>

                </tr>

              <tr>

                <td width="80" height="25" bgcolor="F7F7F7"><span class="text1">리턴연장여부</span></td>

                <td height="25" colspan="3" bgcolor="#FFFFFF"><input name="return" type="radio" id="return" value="radio" checked="checked" />

                  <span class="text1">                  예 

                  <input name="return" type="radio" id="return" value="radio" />

                  아니오 현지출발예정일

                  <input name="startdate" type="text" id="startdate" size="10" />

                  </span> <span class="text1">관광진흥기금

                  <select name="money" class="text1" id="money">

                    <option>▷포함</option>

                    <option>줄거니.</option>

                    <option>안줄건데</option>

                                    </select>

                  </span></td>

                </tr>

              <tr>

                <td width="80" height="25" bgcolor="F7F7F7"><span class="text1">상세주소</span></td>

                <td height="25" colspan="3" bgcolor="#FFFFFF"><span class="text1">

                  <input name="addr" type="text" id="addr" size="50" /> 

                  전체주소입력

                </span></td>

                </tr>

              <tr>

                <td width="80" height="25" bgcolor="F7F7F7"><span class="text1">고객요청사항</span></td>

                <td height="25" colspan="3" bgcolor="#FFFFFF"><span class="text1">

                  <input name="help" type="text" id="help" size="55" />

                </span></td>

                </tr>

            </table></td>

            </tr>

          <tr>

            <td width="20">&nbsp;</td>

            <td><table width="230" border="0" align="center" cellpadding="0" cellspacing="0">

              <tr>

                <td colspan="6">&nbsp;</td>

                </tr>

              <tr>

                <td><input type = "image"  src="img/travel_button_01.gif" width="84" height="27" onclick = "JavaScript:finish()"/></td>

                <td width="2">&nbsp;</td>

                <td><input type = "image"  src="img/travel_button_02.gif" width="71" height="27" /></td>

                <td width="2">&nbsp;</td>

                <td><input type = "image"  src="img/travel_button_03.gif" width="71" height="27" /></td>

              </tr>

              <tr>

                <td colspan="6">&nbsp;</td>

                </tr>

            </table></td>

            </tr>


        </table></td>

        <td width="26">&nbsp;</td>

      </tr>

    </table></td>

  </tr>

  <tr>

    <td height="37" colspan="2" bgcolor="#000000"></td>

  </tr>

</table>

</form>

</body>

</html>





formCheck.js
function finish() {
var frmObj = document.frm;

if (frmObj.adult.value == '' || frmObj.child.value == ''
|| frmObj.toddler.value == '') {
alert("여행인원은 필수!!");
frm
return;
}
if (frmObj.korname.value == '' || frmObj.engname.value == '') {
alert("이름은 필수사항이다");
frm
return;
}

if (frmObj.tel1.value == '' || frmObj.tel2.value == ''
|| frmObj.tel3.value == '') {
alert("전화번호는 생명이다");
return;
}

if (frmObj.jumin1.value == '' || frmObj.jumin1.value == '') {
alert("주민좀 입력해줘용.");
return;
}

if (frmObj.email.value == '') {
alert("이메일은 바보다");
return;
}
if (frmObj.passportnum.value == '') {
alert("여권번호 적어라");
return;
}
if (frmObj.passportdate.value == '') {
alert("여권만료일 적어라");
return;
}
if (frmObj.visadate.value == '') {
alert("비자만료일 적어라");
return;
}
if (frmObj.startdate.value == '') {
alert("현지출발예정일 적어라");
return;
}
if (frmObj.addr.value == '') {
alert("상세주소 적어라");
return;
}
if (frmObj.help.value == '') {
alert("고객 요청사항은??");
return;
}

if (!frmObj.agree.checked) {
alert("여행자 약관에 동의하셔야합니다.");
}
if (!frmObj.agree1.checked) {
alert("개인정보보호정책에 동의하셔야 합니다.");
}

}
function checkJumin(){
var jumin1 = document.frm.jumin1.value;
var jumin2 = document.frm.jumin2.value;
var jumin = jumin1+"-"+jumin2;
if (jumin != '') {
var str =/^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[1-4][0-9]{6}$/;
var result = str.test(jumin);

if (!result) {
alert("주민번호 형식이 잘못되었다.");
email.focus();
email.select();
}
}
}

function checkKorName(){
var name1 = document.frm.engname.value;
var name2 = document.frm.engname1.value;
var name = name1 + name2;
if (name != '') {
var str = /^[가-힣]+$/;
var result = str.test(name);

if (!result) {
alert("한글이름은 한글만 써라");
email.focus();
email.select();
}
}
}

function checkEngName(){
var name1 = document.frm.engname.value;
var name2 = document.frm.engname1.value;
var name = name1 + name2;
if (name != '') {
var str = /^[A-Z]+$/;
var result = str.test(name);

if (!result) {
alert("영문이름은 영어만 써라");
email.focus();
email.select();
}
}
}

function checkTel() {
var tel1 = document.frm.tel1.value;
var tel2 = document.frm.tel2.value;
var tel3 = document.frm.tel3.value;
var tel = tel1 + "-" + tel2 + "-" + tel3;
if (tel != '') {
var str = /(010|011|016|019)-\d{3,4}-\d{4}/;
var result = str.test(tel);

if (!result) {
alert("전화번호 형식이 잘못되었다.");
email.focus();
email.select();
}
}
}

function checkEmail() {

var email = document.frm.email.value;
if (email != '') {
var str = /^[a-z A-Z 0-9\-_]+@[a-z A-Z 0-9\-]+(\.[a-z A-Z 0-9 \-]+)+$/;
var result = str.test(email);

if (!result) {
alert("이메일 형식이 잘못되었다.");
email.focus();
email.select();
}
}
}
function checkPeople() {
var frmObj = document.frm;

var peo1 = frmObj.adult.value * 39000000;
var peo2 = frmObj.child.value * 29000000;
var peo3 = frmObj.toddler.value * 19000000;

frmObj.price.value = peo1 + peo2 + peo3;

}


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

getElementById  (0) 2014.08.19
up and down  (0) 2014.08.19
formTest 외부Script  (0) 2014.08.19
전화번호 정규화  (0) 2014.08.19
함수로 읽어와 값 설정  (0) 2014.08.19