작성자

freewebkorea

카테고리

비밀번호

제목

<H2>입력값 검증(validation)</H2>
입력값 검증이란 웹 사이트 상에서 입력 양식에 작성되어 전송되는 데이터의 값 중에 빠진 것은 없는지, 또 올바른 입력값인지를 검증하는 과정입니다. 특히 전자 상거래 상의 물품 주문에 있어서는 더욱 중요한 과정이라고 할 수 있습니다. 예를 들어 피자를 주문하는데 '크기나 두께 정도는 안 빼 먹고 잘 입력하겠지 머...' 라고 안일하게 생각하고 입력값을 검증하지 않는 다면 주문자가 그 것을 빼 놓았을 경우 어떤 크기이며, 두께는 어떤 걸로 보내야 할지 황당하지 않겠습니까? 그러므로 이 번 페이지의 입력값 검증은 Form을 다루는데 있어서 필수 사항이라 할 수 있겠습니다. 아래의 피자 주문서를 보면 
&lt;FORM>
<TABLE id=tblPizzaForm cellSpacing=0 cellPadding=3 align=center border=1>
<CAPTION>Web Donald Pizza Order Form</CAPTION>
<TBODY>
<TR vAlign=top>
<TD>Name: </TD>
<TD><INPUT></TD></TR>
<TR vAlign=top>
<TD>Password: </TD>
<TD><INPUT type=password></TD></TR>
<TR vAlign=top>
<TD>Size: </TD>
<TD><SELECT> <OPTION value=0 selected>--- pick a size ---</OPTION> <OPTION value=1>small</OPTION> <OPTION value=2>medium</OPTION> <OPTION value=3>large</OPTION></SELECT> </TD></TR>
<TR vAlign=top>
<TD colSpan=2>
<FIELDSET><LEGEND>Crust</LEGEND>
<TABLE cellSpacing=0 cellPadding=1>
<TBODY>
<TR>
<TD><INPUT type=radio value=Thick name=radCrust></TD>
<TD>Thick</TD>
<TD><INPUT type=radio value=Thin name=radCrust></TD>
<TD>Thin 
<TD></TD></TR></TBODY></TABLE></FIELDSET> </TD></TR>
<TR vAlign=top>
<TD colSpan=2>
<FIELDSET><LEGEND>Toppings</LEGEND>
<TABLE cellSpacing=0 cellPadding=1>
<TBODY>
<TR>
<TD><INPUT type=checkbox value=Ham></TD>
<TD>Ham</TD></TR>
<TR>
<TD><INPUT type=checkbox value=Pineapple></TD>
<TD>Pineapple</TD></TR>
<TR>
<TD><INPUT id=chkExtraCheese type=checkbox value="Extra Cheese" name=chkExtraCheese></TD>
<TD>Extra Cheese</TD></TR></TBODY></TABLE></FIELDSET> </TD></TR>
<TR vAlign=top>
<TD align=right colSpan=2><INPUT type=button value=" Order! "></TD></TR></TBODY></TABLE>&lt;/FORM>
주문자 성명, 비밀번호, 피자크기, 클러스트종류, 추가토핑, 이렇게 다섯 가지 항목이 있는데, 이중 Option 사항인 추가토핑을 제외한 나머지 4 개의 항목은 필수 입력이 되겠습니다. 이 번 페이지에서는 Input type이 text와 password, 또는 radio인 경우, drop down box의 경우에 입력이나 선택을 하지 않았을 때 오류 메시지를 출력하고 전송을 중단하는 방법에 대해 알아 보도록 하겠습니다.
<HR class=grayHr>
 Input type="text", type="password" 의 입력값 검증 
text와 password의 경우에는 입력란에 값이 입력되지 않았을 경우를 check 합니다. Check 하는 방법은 아래와 같고, Inline JavaScript를 사용했기 때문에 frm.strName.value == '' 의 ''는 작은 다옴표 2개를 연달아 찍었습니다.text type, password type 
<DIV class=input id=validate_1>&lt;body&gt; &lt;form name="frm"&gt; &nbsp;&nbsp;&lt;input type="text" name="strName" id="strName"&gt;&lt;br /&gt; &nbsp;&nbsp;&lt;input type="button"value=" validate! " onclick="if(frm.strName.value == ''){alert('Please enter your name. '); frm.strName.focus(); return false;}" /&gt; &lt;/form&gt; &lt;/body&gt; </DIV> <A href="javascript:copy2Clipboard(validate_1);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 설명 
<DIV class=input>if(frm.strName.value == '') // frm.strName 의 값(value)이 비었으면 { 실행 내용 괄호를 연다. alert('Please enter your name. '); // Please enter your name 이라는 경고 창을 띄우고 frm.strName.focus(); // strName 입력란에 focus(커저 넣기)를 주고 return false; // false 값을 return 하여 동작을 멈출 것. *** 이 부분이 없으면 경고창을 띄운 다음 내용을 실행하게 됨. } 실행 내용 괄호를 닫는다. </DIV> 
<HR class=grayHr>
 Select - Option 의 입력값 검증 
Select - Option의 경우 제목으로 나오는 --- pick a size --- 의 value를 0으로 주고, 선택해야 될 small, medium, large의 값을 각각 1, 2, 3으로 주어 제목의 value 인 '0' 이 선택되면... 즉 small, medium, large 값 중 하나가 선택되지 않으면 alert 창을 띄우는 방법으로 값을 검증합니다.입력 
<DIV class=input id=validation_select>&lt;body&gt; &lt;form name="frmSel"&gt; &nbsp;&nbsp;&lt;select name="selSize" id="selSize"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="0"&gt;--- pick a size --- &lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="1"&gt;small&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="2"&gt;medium&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="3"&gt;large&lt;/option&gt; &nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&lt;input type="button" value=" Order! " onclick="if (0 == frmSel.selSize.selectedIndex); {alert('Please select a size. '); frmSel.selSize.focus(); return false;}"&gt; &lt;/form&gt; &lt;/body&gt; </DIV> <A href="javascript:copy2Clipboard(validation_select);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> <A name=return_false></A>
<HR class=grayHr>
 Radio button의 입력값 검증 
Radio button이 check 되었는지의 여부를 검증하는 과정은 다른 과정 보다 약간 복잡합니다. Radio button은 1개 밖에 선택할 수 없기 때문에 button이 몇 개이건 간에 check된 button이 있는지 없는지를 확인하고, 그 값을 받습니다. 아래의 코드 중에 bCrustChecked = false; 부분을 눈 여겨 보시져. Boolean의 경우 그 값이 true 아니면 false 이기 때문에 일단 check가 되지 않은 상태를 가정하기 위해 false 값을 주고, 반복문을 통해 radio button의 갯수 만큼 check 되었는지를 확인하여 check된 button이 있을 때 true 값을 return하게 됩니다. 이와 같이 bCrustCkecked = false; 처럼 Boolean 값을 주어 어떤 상황을 가정하는 것을 Flag을 세운다고 합니다.입력 <PRE class=input id=validation_radio>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Radio button의 입력값 검증&lt;/title&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
// 함수명을 ValidateForm 으로 주고 eForm 이라는 대입 변수 지정 
function ValidateForm(eForm){
// bCrustChecked 변수에 false 값을 주어 Flag을 세운다.
 var bCrustChecked = false; 
 for (var i=0;i&lt;eForm.radCrust.length;i++) // Radio button의 갯수 많큼 check loop 반복 
 {
 if (eForm.radCrust[i].checked) // radCrust 라는 이름을 가진 radio button중 하나가 체크되면 
 {
 bCrustChecked = true; // Flag을 true 로 만든다.
 var sCrust = eForm.radCrust[i].value; // check된 값을 전송할 sCrust 변수를 만들어 저장.
 break; // 실행 종료(break 문을 만나면 여기서 구문이 끝나고 다음 과정으로 jump합니다.)
 }
 }
 if (!bCrustChecked) // bCrustChecked 가 false 이면 즉, check된 radio button이 없으면.
 {
 alert("Please select a crust type. "); // 경고창을 띄우고 
 return false; // false 값 return.
 }
}
// --&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name="frmCrust" onsubmit="return ValidateForm(this);"&gt;
 &lt;input type="radio" name="radCrust" id="radCrust_Thick" value="Thick"&gt; Thic&lt;u&gt;k&lt;/u&gt;
 &lt;input type="radio" name="radCrust" id="radCrust_Thin" value="Thin"&gt; Thi&lt;u&gt;n&lt;/u&gt;
 &lt;input type="submit" value=" Order! "&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(validation_radio);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<DIV class=note><IMG height=11 alt="" src="http://www.cadvance.org/doc/images/icon/ico_note.gif" width=11> alert box 의 text를 보기 좋게 띄우기 alert box의 경우 box 왼쪽의 노란 삼각형 때문에 문장이 오른쪽으로 치우치게 되는게 문장을 그냥 입력하게 되면 <A href="javascript:alert('오른쪽으로 치우친 문장');">여기</A>와 같이 되져... 그렇지만 문장 뒤에 아래와 같이 space를 10 ~ 12개 정도 주고 따옴표를 닫으면 <A href="javascript:alert('가운데로 모인 문장 ');">요기</A>처럼 문장이 가운데로 오게 됩니다. 별 것 아닌 것 같아도 조금만 신경쓰면 보기 좋은 경고창을 만들 수 있습니다. &lt;a href="javascript:alert('오른쪽으로 치우친 문장');"&gt;여기&lt;/a&gt; &lt;a href="javascript:alert('가운데로 모인 문장&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');"&gt;요기&lt;/a&gt; </DIV> 
<HR class=grayHr>
 Form 에 관한 종합 예제 
아래의 Source code는 지금 까지 배운 form과 관련된 사항들을 총 망라한 예제로서 ASP과 같이 전송된 값을 처리하는 부분 바로 전까지의 과정이 되겠습니다. 잘 분석해 보면 많은 도움이 되리라 믿습니다. 내용은 모두 위에서 설명한 부분이므로 따로 주석은 붙이지 않았습니다.입력 <PRE class=input id=form_design_ex>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Web Donald Pizza Order Form&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!-- 
 BODY { font-family:verdana;}
 TABLE#tblPizzaForm { background-color:buttonface; }
 TABLE#tblPizzaForm CAPTION {
 background-color:activecaption; color:captiontext;
 font-weight:bold; text-align:left; }
 TABLE#tblPizzaForm TABLE {}
 TABLE#tblPizzaForm INPUT { font-family:verdana; }
 TABLE#tblPizzaForm SELECT { font-family:verdana; }
--&gt;
&lt;/style&gt;

&lt;script language="JavaScript"&gt;
&lt;!--
function ValidateForm(eForm){
    if ("" == eForm.txtName.value)
    {
    window.alert("Please enter your name.    "); 
    eForm.txtName.focus()
    return false;
    }
    if ("" == eForm.txtPassword.value)
    {
    window.alert("Please enter your password.    "); 
    eForm.txtPassword.focus()
    return false;
    }
    else if (0 == eForm.selSize.selectedIndex)
    {
    window.alert("Please select a size.    "); 
    eForm.selSize.focus()
    return false;
    }
    else 
    {
    var bCrustChecked = false;
    for (var i=0;i&lt;eForm.radCrust.length;i++)
    {
    if (eForm.radCrust[i].checked) 
    {
    bCrustChecked = true;
    var sCrust = eForm.radCrust[i].value;
    break;
    }
    }
    if (!bCrustChecked)
    {
    window.alert("Please select a crust type.    "); 
    return false;
    }
    }
window.alert("All is well. Submitting form...    ");
return true;
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form name="frmPizza" onsubmit="return ValidateForm(this);"&gt;

&lt;table id="tblPizzaForm" cellspacing="0" align="center" cellpadding="3" border="1"&gt;
 &lt;caption&gt;&lt;span style="color:#cc6600;"&gt;Web Donald Pizza&lt;/span&gt; Order Form&lt;/caption&gt;
 &lt;tr valign="top"&gt;
 &lt;td&gt;&lt;label for="txtName" accesskey="M"&gt;Na&lt;u&gt;m&lt;/u&gt;e: &lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type="text" name="txtName" id="txtName"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 &lt;td&gt;&lt;label for="txtPassword" accesskey="P"&gt;&lt;u&gt;P&lt;/u&gt;assword: &lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type="password" name="txtPassword" id="txtPassword"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 &lt;td&gt;&lt;label for="selSize" accesskey="S"&gt;&lt;u&gt;S&lt;/u&gt;ize: &lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;
 &lt;select name="selSize" id="selSize"&gt; 
 &lt;option value="0"&gt;--- pick a size --- &lt;/option&gt;
 &lt;option value="1"&gt;small&lt;/option&gt;
 &lt;option value="2"&gt;medium&lt;/option&gt;
 &lt;option value="3"&gt;large&lt;/option&gt;
 &lt;/select&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 &lt;td colspan="2"&gt;
 &lt;fieldset id="fstCrust"&gt;
 &lt;legend&gt;Crust&lt;/legend&gt;
 &lt;table cellpadding="1" cellspacing="0"&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;input type="radio" name="radCrust" id="radCrust_Thick" value="Thick"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;label for="radCrust_Thick" accesskey="K"&gt;Thic&lt;u&gt;k&lt;/u&gt;&lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type="radio" name="radCrust" id="radCrust_Thin" value="Thin"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;label for="radCrust_Thin" accesskey="N"&gt;Thi&lt;u&gt;n&lt;/u&gt;&lt;/label&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/fieldset&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 &lt;td colspan="2"&gt;
 &lt;fieldset name="fstToppings"&gt;
 &lt;legend&gt;Toppings&lt;/legend&gt;
 &lt;table cellpadding="1" cellspacing="0"&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;input type="checkbox" name="chkHam" id="chkHam" value="Ham"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;label for="chkHam" accesskey="H"&gt;&lt;u&gt;H&lt;/u&gt;am&lt;/label&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;input type="checkbox" name="chkPineapple" id="chkPineapple"
 value="Pineapple"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;label for="chkPineapple" accesskey="I"&gt;P&lt;u&gt;i&lt;/u&gt;neapple&lt;/label&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;input type="checkbox" name="chkExtraCheese" 
 id="chkExtraCheese" value="Extra Cheese"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;label for="chkExtraCheese" accesskey="E"&gt;&lt;u&gt;E&lt;/u&gt;xtra Cheese&lt;/label&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/fieldset&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 &lt;td colspan="2" align="right"&gt;&lt;input type="submit" value=" Order! "&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(form_design_ex);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=blackHr>

<H2>입력값 검증(validation)</H2>
입력값 검증이란 웹 사이트 상에서 입력 양식에 작성되어 전송되는 데이터의 값 중에 빠진 것은 없는지, 또 올바른 입력값인지를 검증하는 과정입니다. 특히 전자 상거래 상의 물품 주문에 있어서는 더욱 중요한 과정이라고 할 수 있습니다. 예를 들어 피자를 주문하는데 '크기나 두께 정도는 안 빼 먹고 잘 입력하겠지 머...' 라고 안일하게 생각하고 입력값을 검증하지 않는 다면 주문자가 그 것을 빼 놓았을 경우 어떤 크기이며, 두께는 어떤 걸로 보내야 할지 황당하지 않겠습니까? 그러므로 이 번 페이지의 입력값 검증은 Form을 다루는데 있어서 필수 사항이라 할 수 있겠습니다. 아래의 피자 주문서를 보면 
&lt;FORM>
<TABLE id=tblPizzaForm cellSpacing=0 cellPadding=3 align=center border=1>
<CAPTION>Web Donald Pizza Order Form</CAPTION>
<TBODY>
<TR vAlign=top>
<TD>Name: </TD>
<TD><INPUT></TD></TR>
<TR vAlign=top>
<TD>Password: </TD>
<TD><INPUT type=password></TD></TR>
<TR vAlign=top>
<TD>Size: </TD>
<TD><SELECT> <OPTION value=0 selected>--- pick a size ---</OPTION> <OPTION value=1>small</OPTION> <OPTION value=2>medium</OPTION> <OPTION value=3>large</OPTION></SELECT> </TD></TR>
<TR vAlign=top>
<TD colSpan=2>
<FIELDSET><LEGEND>Crust</LEGEND>
<TABLE cellSpacing=0 cellPadding=1>
<TBODY>
<TR>
<TD><INPUT type=radio value=Thick name=radCrust></TD>
<TD>Thick</TD>
<TD><INPUT type=radio value=Thin name=radCrust></TD>
<TD>Thin 
<TD></TD></TR></TBODY></TABLE></FIELDSET> </TD></TR>
<TR vAlign=top>
<TD colSpan=2>
<FIELDSET><LEGEND>Toppings</LEGEND>
<TABLE cellSpacing=0 cellPadding=1>
<TBODY>
<TR>
<TD><INPUT type=checkbox value=Ham></TD>
<TD>Ham</TD></TR>
<TR>
<TD><INPUT type=checkbox value=Pineapple></TD>
<TD>Pineapple</TD></TR>
<TR>
<TD><INPUT id=chkExtraCheese type=checkbox value="Extra Cheese" name=chkExtraCheese></TD>
<TD>Extra Cheese</TD></TR></TBODY></TABLE></FIELDSET> </TD></TR>
<TR vAlign=top>
<TD align=right colSpan=2><INPUT type=button value=" Order! "></TD></TR></TBODY></TABLE>&lt;/FORM>
주문자 성명, 비밀번호, 피자크기, 클러스트종류, 추가토핑, 이렇게 다섯 가지 항목이 있는데, 이중 Option 사항인 추가토핑을 제외한 나머지 4 개의 항목은 필수 입력이 되겠습니다. 이 번 페이지에서는 Input type이 text와 password, 또는 radio인 경우, drop down box의 경우에 입력이나 선택을 하지 않았을 때 오류 메시지를 출력하고 전송을 중단하는 방법에 대해 알아 보도록 하겠습니다.
<HR class=grayHr>
 Input type="text", type="password" 의 입력값 검증 
text와 password의 경우에는 입력란에 값이 입력되지 않았을 경우를 check 합니다. Check 하는 방법은 아래와 같고, Inline JavaScript를 사용했기 때문에 frm.strName.value == '' 의 ''는 작은 다옴표 2개를 연달아 찍었습니다.text type, password type 
<DIV class=input id=validate_1>&lt;body&gt; &lt;form name="frm"&gt; &nbsp;&nbsp;&lt;input type="text" name="strName" id="strName"&gt;&lt;br /&gt; &nbsp;&nbsp;&lt;input type="button"value=" validate! " onclick="if(frm.strName.value == ''){alert('Please enter your name. '); frm.strName.focus(); return false;}" /&gt; &lt;/form&gt; &lt;/body&gt; </DIV> <A href="javascript:copy2Clipboard(validate_1);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 설명 
<DIV class=input>if(frm.strName.value == '') // frm.strName 의 값(value)이 비었으면 { 실행 내용 괄호를 연다. alert('Please enter your name. '); // Please enter your name 이라는 경고 창을 띄우고 frm.strName.focus(); // strName 입력란에 focus(커저 넣기)를 주고 return false; // false 값을 return 하여 동작을 멈출 것. *** 이 부분이 없으면 경고창을 띄운 다음 내용을 실행하게 됨. } 실행 내용 괄호를 닫는다. </DIV> 
<HR class=grayHr>
 Select - Option 의 입력값 검증 
Select - Option의 경우 제목으로 나오는 --- pick a size --- 의 value를 0으로 주고, 선택해야 될 small, medium, large의 값을 각각 1, 2, 3으로 주어 제목의 value 인 '0' 이 선택되면... 즉 small, medium, large 값 중 하나가 선택되지 않으면 alert 창을 띄우는 방법으로 값을 검증합니다.입력 
<DIV class=input id=validation_select>&lt;body&gt; &lt;form name="frmSel"&gt; &nbsp;&nbsp;&lt;select name="selSize" id="selSize"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="0"&gt;--- pick a size --- &lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="1"&gt;small&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="2"&gt;medium&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="3"&gt;large&lt;/option&gt; &nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&lt;input type="button" value=" Order! " onclick="if (0 == frmSel.selSize.selectedIndex); {alert('Please select a size. '); frmSel.selSize.focus(); return false;}"&gt; &lt;/form&gt; &lt;/body&gt; </DIV> <A href="javascript:copy2Clipboard(validation_select);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> <A name=return_false></A>
<HR class=grayHr>
 Radio button의 입력값 검증 
Radio button이 check 되었는지의 여부를 검증하는 과정은 다른 과정 보다 약간 복잡합니다. Radio button은 1개 밖에 선택할 수 없기 때문에 button이 몇 개이건 간에 check된 button이 있는지 없는지를 확인하고, 그 값을 받습니다. 아래의 코드 중에 bCrustChecked = false; 부분을 눈 여겨 보시져. Boolean의 경우 그 값이 true 아니면 false 이기 때문에 일단 check가 되지 않은 상태를 가정하기 위해 false 값을 주고, 반복문을 통해 radio button의 갯수 만큼 check 되었는지를 확인하여 check된 button이 있을 때 true 값을 return하게 됩니다. 이와 같이 bCrustCkecked = false; 처럼 Boolean 값을 주어 어떤 상황을 가정하는 것을 Flag을 세운다고 합니다.입력 <PRE class=input id=validation_radio>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Radio button의 입력값 검증&lt;/title&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
// 함수명을 ValidateForm 으로 주고 eForm 이라는 대입 변수 지정 
function ValidateForm(eForm){
// bCrustChecked 변수에 false 값을 주어 Flag을 세운다.
 var bCrustChecked = false; 
 for (var i=0;i&lt;eForm.radCrust.length;i++) // Radio button의 갯수 많큼 check loop 반복 
 {
 if (eForm.radCrust[i].checked) // radCrust 라는 이름을 가진 radio button중 하나가 체크되면 
 {
 bCrustChecked = true; // Flag을 true 로 만든다.
 var sCrust = eForm.radCrust[i].value; // check된 값을 전송할 sCrust 변수를 만들어 저장.
 break; // 실행 종료(break 문을 만나면 여기서 구문이 끝나고 다음 과정으로 jump합니다.)
 }
 }
 if (!bCrustChecked) // bCrustChecked 가 false 이면 즉, check된 radio button이 없으면.
 {
 alert("Please select a crust type. "); // 경고창을 띄우고 
 return false; // false 값 return.
 }
}
// --&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name="frmCrust" onsubmit="return ValidateForm(this);"&gt;
 &lt;input type="radio" name="radCrust" id="radCrust_Thick" value="Thick"&gt; Thic&lt;u&gt;k&lt;/u&gt;
 &lt;input type="radio" name="radCrust" id="radCrust_Thin" value="Thin"&gt; Thi&lt;u&gt;n&lt;/u&gt;
 &lt;input type="submit" value=" Order! "&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(validation_radio);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<DIV class=note><IMG height=11 alt="" src="http://www.cadvance.org/doc/images/icon/ico_note.gif" width=11> alert box 의 text를 보기 좋게 띄우기 alert box의 경우 box 왼쪽의 노란 삼각형 때문에 문장이 오른쪽으로 치우치게 되는게 문장을 그냥 입력하게 되면 <A href="javascript:alert('오른쪽으로 치우친 문장');">여기</A>와 같이 되져... 그렇지만 문장 뒤에 아래와 같이 space를 10 ~ 12개 정도 주고 따옴표를 닫으면 <A href="javascript:alert('가운데로 모인 문장 ');">요기</A>처럼 문장이 가운데로 오게 됩니다. 별 것 아닌 것 같아도 조금만 신경쓰면 보기 좋은 경고창을 만들 수 있습니다. &lt;a href="javascript:alert('오른쪽으로 치우친 문장');"&gt;여기&lt;/a&gt; &lt;a href="javascript:alert('가운데로 모인 문장&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');"&gt;요기&lt;/a&gt; </DIV> 
<HR class=grayHr>
 Form 에 관한 종합 예제 
아래의 Source code는 지금 까지 배운 form과 관련된 사항들을 총 망라한 예제로서 ASP과 같이 전송된 값을 처리하는 부분 바로 전까지의 과정이 되겠습니다. 잘 분석해 보면 많은 도움이 되리라 믿습니다. 내용은 모두 위에서 설명한 부분이므로 따로 주석은 붙이지 않았습니다.입력 <PRE class=input id=form_design_ex>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Web Donald Pizza Order Form&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!-- 
 BODY { font-family:verdana;}
 TABLE#tblPizzaForm { background-color:buttonface; }
 TABLE#tblPizzaForm CAPTION {
 background-color:activecaption; color:captiontext;
 font-weight:bold; text-align:left; }
 TABLE#tblPizzaForm TABLE {}
 TABLE#tblPizzaForm INPUT { font-family:verdana; }
 TABLE#tblPizzaForm SELECT { font-family:verdana; }
--&gt;
&lt;/style&gt;

&lt;script language="JavaScript"&gt;
&lt;!--
function ValidateForm(eForm){
    if ("" == eForm.txtName.value)
    {
    window.alert("Please enter your name.    "); 
    eForm.txtName.focus()
    return false;
    }
    if ("" == eForm.txtPassword.value)
    {
    window.alert("Please enter your password.    "); 
    eForm.txtPassword.focus()
    return false;
    }
    else if (0 == eForm.selSize.selectedIndex)
    {
    window.alert("Please select a size.    "); 
    eForm.selSize.focus()
    return false;
    }
    else 
    {
    var bCrustChecked = false;
    for (var i=0;i&lt;eForm.radCrust.length;i++)
    {
    if (eForm.radCrust[i].checked) 
    {
    bCrustChecked = true;
    var sCrust = eForm.radCrust[i].value;
    break;
    }
    }
    if (!bCrustChecked)
    {
    window.alert("Please select a crust type.    "); 
    return false;
    }
    }
window.alert("All is well. Submitting form...    ");
return true;
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form name="frmPizza" onsubmit="return ValidateForm(this);"&gt;

&lt;table id="tblPizzaForm" cellspacing="0" align="center" cellpadding="3" border="1"&gt;
 &lt;caption&gt;&lt;span style="color:#cc6600;"&gt;Web Donald Pizza&lt;/span&gt; Order Form&lt;/caption&gt;
 &lt;tr valign="top"&gt;
 &lt;td&gt;&lt;label for="txtName" accesskey="M"&gt;Na&lt;u&gt;m&lt;/u&gt;e: &lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type="text" name="txtName" id="txtName"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 &lt;td&gt;&lt;label for="txtPassword" accesskey="P"&gt;&lt;u&gt;P&lt;/u&gt;assword: &lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type="password" name="txtPassword" id="txtPassword"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 &lt;td&gt;&lt;label for="selSize" accesskey="S"&gt;&lt;u&gt;S&lt;/u&gt;ize: &lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;
 &lt;select name="selSize" id="selSize"&gt; 
 &lt;option value="0"&gt;--- pick a size --- &lt;/option&gt;
 &lt;option value="1"&gt;small&lt;/option&gt;
 &lt;option value="2"&gt;medium&lt;/option&gt;
 &lt;option value="3"&gt;large&lt;/option&gt;
 &lt;/select&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 &lt;td colspan="2"&gt;
 &lt;fieldset id="fstCrust"&gt;
 &lt;legend&gt;Crust&lt;/legend&gt;
 &lt;table cellpadding="1" cellspacing="0"&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;input type="radio" name="radCrust" id="radCrust_Thick" value="Thick"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;label for="radCrust_Thick" accesskey="K"&gt;Thic&lt;u&gt;k&lt;/u&gt;&lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type="radio" name="radCrust" id="radCrust_Thin" value="Thin"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;label for="radCrust_Thin" accesskey="N"&gt;Thi&lt;u&gt;n&lt;/u&gt;&lt;/label&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/fieldset&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 &lt;td colspan="2"&gt;
 &lt;fieldset name="fstToppings"&gt;
 &lt;legend&gt;Toppings&lt;/legend&gt;
 &lt;table cellpadding="1" cellspacing="0"&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;input type="checkbox" name="chkHam" id="chkHam" value="Ham"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;label for="chkHam" accesskey="H"&gt;&lt;u&gt;H&lt;/u&gt;am&lt;/label&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;input type="checkbox" name="chkPineapple" id="chkPineapple"
 value="Pineapple"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;label for="chkPineapple" accesskey="I"&gt;P&lt;u&gt;i&lt;/u&gt;neapple&lt;/label&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;input type="checkbox" name="chkExtraCheese" 
 id="chkExtraCheese" value="Extra Cheese"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;label for="chkExtraCheese" accesskey="E"&gt;&lt;u&gt;E&lt;/u&gt;xtra Cheese&lt;/label&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/fieldset&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 &lt;td colspan="2" align="right"&gt;&lt;input type="submit" value=" Order! "&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(form_design_ex);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=blackHr>

첨부파일

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

예금주:제주사랑(송진아)