Form validation
입력값 검증(validation)
입력값 검증이란 웹 사이트 상에서 입력 양식에 작성되어 전송되는 데이터의 값 중에 빠진 것은 없는지, 또 올바른 입력값인지를 검증하는 과정입니다. 특히 전자 상거래 상의 물품 주문에 있어서는 더욱 중요한 과정이라고 할 수 있습니다. 예를 들어 피자를 주문하는데 '크기나 두께 정도는 안 빼 먹고 잘 입력하겠지 머...' 라고 안일하게 생각하고 입력값을 검증하지 않는 다면 주문자가 그 것을 빼 놓았을 경우 어떤 크기이며, 두께는 어떤 걸로 보내야 할지 황당하지 않겠습니까? 그러므로 이 번 페이지의 입력값 검증은 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<form name="frm">
<input type="text" name="strName" id="strName"><br />
<input type="button"value=" validate! " onclick="if(frm.strName.value == ''){alert('Please enter your name. '); frm.strName.focus(); return false;}" />
</form>
</body>
설명
{ 실행 내용 괄호를 연다.
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 창을 띄우는 방법으로 값을 검증합니다.
입력<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>
'Programming > Html/Tag' 카테고리의 다른 글
| input type="text" 에 숫자만 입력 하기 (0) | 2010.07.06 |
|---|---|
| [innerHTML] 동적 테이블 생성 (0) | 2010.04.27 |
| 텍스트 박스에서 엔터키 입력하면 이벤트 처리 되도록 하자. (0) | 2010.02.04 |
| [html] 세로 스크롤만 표시하기 (0) | 2009.06.29 |
| HTTP 500 내부서버오류 에러 해결 방법 (0) | 2009.05.18 |