입력값 검증(validation)

입력값 검증이란 웹 사이트 상에서 입력 양식에 작성되어 전송되는 데이터의 값 중에 빠진 것은 없는지, 또 올바른 입력값인지를 검증하는 과정입니다. 특히 전자 상거래 상의 물품 주문에 있어서는 더욱 중요한 과정이라고 할 수 있습니다. 예를 들어 피자를 주문하는데 '크기나 두께 정도는 안 빼 먹고 잘 입력하겠지 머...' 라고 안일하게 생각하고 입력값을 검증하지 않는 다면 주문자가 그 것을 빼 놓았을 경우 어떤 크기이며, 두께는 어떤 걸로 보내야 할지 황당하지 않겠습니까? 그러므로 이 번 페이지의 입력값 검증은 Form을 다루는데 있어서 필수 사항이라 할 수 있겠습니다. 아래의 피자 주문서를 보면
<FORM>
Web Donald Pizza Order Form

Name:

Password:

Size:

Crust

Thick Thin

Toppings

Ham

Pineapple

Extra Cheese

</FORM>

주문자 성명, 비밀번호, 피자크기, 클러스트종류, 추가토핑, 이렇게 다섯 가지 항목이 있는데, 이중 Option 사항인 추가토핑을 제외한 나머지 4 개의 항목은 필수 입력이 되겠습니다. 이 번 페이지에서는 Input type이 text와 password, 또는 radio인 경우, drop down box의 경우에 입력이나 선택을 하지 않았을 때 오류 메시지를 출력하고 전송을 중단하는 방법에 대해 알아 보도록 하겠습니다.

Input type="text", type="password" 의 입력값 검증

text와 password의 경우에는 입력란에 값이 입력되지 않았을 경우를 check 합니다. Check 하는 방법은 아래와 같고, Inline JavaScript를 사용했기 때문에 frm.strName.value == '' 의 ''는 작은 다옴표 2개를 연달아 찍었습니다.
text type, password type

설명

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 하여 동작을 멈출 것. *** 이 부분이 없으면 경고창을 띄운 다음 내용을 실행하게 됨.
} 실행 내용 괄호를 닫는다.

Select - Option 의 입력값 검증

Select - Option의 경우 제목으로 나오는 --- pick a size --- 의 value를 0으로 주고, 선택해야 될 small, medium, large의 값을 각각 1, 2, 3으로 주어 제목의 value 인 '0' 이 선택되면... 즉 small, medium, large 값 중 하나가 선택되지 않으면 alert 창을 띄우는 방법으로 값을 검증합니다.
입력

<body>
<form name="frmSel">
  <select name="selSize" id="selSize">
    <option value="0">--- pick a size --- </option>
    <option value="1">small</option>
    <option value="2">medium</option>
    <option value="3">large</option>
  </select>
  <input type="button" value=" Order! " onclick="if (0 == frmSel.selSize.selectedIndex); {alert('Please select a size. '); frmSel.selSize.focus(); return false;}">
</form>
</body>

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을 세운다고 합니다.
입력

<html>
<head>
<title>Radio button의 입력값 검증</title>
<script type="text/javascript">
<!--
// 함수명을 ValidateForm 으로 주고 eForm 이라는 대입 변수 지정 
function ValidateForm(eForm){
// bCrustChecked 변수에 false 값을 주어 Flag을 세운다.
    var bCrustChecked = false; 
    for (var i=0;i<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.
    }
}
// -->
</script>
</head>
<body>
<form name="frmCrust" onsubmit="return ValidateForm(this);">
    <input type="radio" name="radCrust" id="radCrust_Thick" value="Thick"> Thic<u>k</u>
    <input type="radio" name="radCrust" id="radCrust_Thin" value="Thin"> Thi<u>n</u>
    <input type="submit" value="   Order!   ">
</form>
</body>
</html>

alert box 의 text를 보기 좋게 띄우기
alert box의 경우 box 왼쪽의 노란 삼각형 때문에 문장이 오른쪽으로 치우치게 되는게 문장을 그냥 입력하게 되면 여기와 같이 되져... 그렇지만 문장 뒤에 아래와 같이 space를 10 ~ 12개 정도 주고 따옴표를 닫으면 요기처럼 문장이 가운데로 오게 됩니다. 별 것 아닌 것 같아도 조금만 신경쓰면 보기 좋은 경고창을 만들 수 있습니다.

<a href="javascript:alert('오른쪽으로 치우친 문장');">여기</a>

<a href="javascript:alert('가운데로 모인 문장 ');">요기</a>

Form 에 관한 종합 예제

아래의 Source code는 지금 까지 배운 form과 관련된 사항들을 총 망라한 예제로서 ASP과 같이 전송된 값을 처리하는 부분 바로 전까지의 과정이 되겠습니다. 잘 분석해 보면 많은 도움이 되리라 믿습니다. 내용은 모두 위에서 설명한 부분이므로 따로 주석은 붙이지 않았습니다.
입력

<html>
<head>
<title>Web Donald Pizza Order Form</title>
<style type="text/css">
<!-- 
    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; }
-->
</style>

<script language="JavaScript">
<!--
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<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;
}
//-->
</script>
</head>

<body>
<form name="frmPizza" onsubmit="return ValidateForm(this);">

  <table id="tblPizzaForm" cellspacing="0" align="center" cellpadding="3" border="1">
  <caption><span style="color:#cc6600;">Web Donald Pizza</span> Order Form</caption>
    <tr valign="top">
      <td><label for="txtName" accesskey="M">Na<u>m</u>e: </label></td>
      <td><input type="text" name="txtName" id="txtName"></td>
    </tr>
    <tr valign="top">
      <td><label for="txtPassword" accesskey="P"><u>P</u>assword: </label></td>
      <td><input type="password" name="txtPassword" id="txtPassword"></td>
    </tr>
    <tr valign="top">
      <td><label for="selSize" accesskey="S"><u>S</u>ize: </label></td>
      <td>
        <select name="selSize" id="selSize"> 
          <option value="0">--- 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 id="fstCrust">
      <legend>Crust</legend>
        <table cellpadding="1" cellspacing="0">
          <tr>
            <td><input type="radio" name="radCrust" id="radCrust_Thick" value="Thick"></td>
            <td><label for="radCrust_Thick" accesskey="K">Thic<u>k</u></label></td>
            <td><input type="radio" name="radCrust" id="radCrust_Thin" value="Thin"></td>
            <td><label for="radCrust_Thin" accesskey="N">Thi<u>n</u></label></td>
          </tr>
        </table>
      </fieldset>
      </td>
    </tr>
    <tr valign="top">
      <td colspan="2">
        <fieldset name="fstToppings">
        <legend>Toppings</legend>
        <table cellpadding="1" cellspacing="0">
          <tr>
            <td><input type="checkbox" name="chkHam" id="chkHam" value="Ham"></td>
            <td><label for="chkHam" accesskey="H"><u>H</u>am</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkPineapple" id="chkPineapple"
            value="Pineapple"></td>
            <td><label for="chkPineapple" accesskey="I">P<u>i</u>neapple</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkExtraCheese" 
            id="chkExtraCheese" value="Extra Cheese"></td>
            <td><label for="chkExtraCheese" accesskey="E"><u>E</u>xtra Cheese</label></td>
          </tr>
        </table>
        </fieldset>
      </td>
    </tr>
    <tr valign="top">
      <td colspan="2" align="right"><input type="submit" value="   Order!   "></td>
    </tr>
  </table>
</form>
</body>
</html>

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

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

입력값 검증(validation)