자바스크립트(JavaScript) 기초강좌 - 6장. FORM
6장. Form
6.1) Form
<Form>태그의 유일한 목적은 클라이언트측에서 사용자로부터 수집된 데이터를 서버(Server)에 전송하는 것이다.
클라이언트 자체는 데이터를 처리할 만큼 강력하지 못하기 때문에 정보를 처리하는 것은 항상 서버의 몫이었다. 그러나 자바스크립트는 <FORM>태그에 강력한 처리 수단을 제공한다.
그러므로 자바스크립트를 이용하면 무조건 Server쪽으로 Data 처리를 넘기는 것이 아니라 Client에서 Validation을 하므로 Server의 부담을 줄일 수 있다.
Form객체의 속성(property)들은 다음과 같은 것이 있다.
* [형식]
<FORM Name="Form 이름" Method="post/get" Encoding="..." Action="...">
- Action
Form을 전송할 때 Server에서 실행하고자 하는 program이름을 지정할 때 사용한다. (주로 servlet을 의미한다)
- Encoding
Form이 전달되는 암호화 방법을 지정한다.
- Method
Form이 서버에 전달되는 방식을 지정한다. post방식과 get방식이 있으며 생략하면 get방식이 지정된다.
6.2) Input Validation
6.2.1) Radio Button을 이용한 예제
* [속성]
|
속성 |
설명 |
|
checked |
Radio버튼이 선택되어 있으면 true, 아니면 false |
|
defaultChecked |
초기값으로 선택되어 있으면 true, 아니면 false |
|
length |
라디오 버튼의 수 |
|
name |
라디오 버튼의 이름 |
|
value |
라디오 버튼의 값 |
* [메소드]
|
메소드 |
설명 |
|
click() |
Radio버튼 클릭 |
|
blur() |
Radio버튼의 Focus를 제거한다. |
|
focus() |
Radio버튼에 Focus를 준다 |
|
name |
라디오 버튼의 이름 |
* 예제 - 실행
<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
function valid(x)
{
var count = 0;
for ( i=0; i < x.item.length; i++ )
{
if( x.item[i].checked )
count += 1;
}
if ( count == 0 )
alert("Check된 항목이 없습니다!");
else
{
if ( x.item[1].checked )
alert("맞았습니다.");
else
alert("틀렸습니다!\n\nJava입니다.");
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<H4>자바누리 Site는 어떤 Language로 이루어졌을까요?</H4>
<INPUT TYPE="radio" NAME="item" VALUE="1">php<BR>
<INPUT TYPE="radio" NAME="item" VALUE="2">Java<BR>
<INPUT TYPE="radio" NAME="item" VALUE="3">asp<BR>
<INPUT TYPE="radio" NAME="item" VALUE="4">c++<BR><BR>
<INPUT TYPE="button" NAME="myButton" VALUE="정답확인"
onClick="valid(this.form)">
</FORM>
</BODY>
</HTML>
※ this란 객체 자신을 의미하는 것이다.
this.form은 폼의 하위요소에서 상위 요소인 폼을 참조하기 위한 방법이다. 예제에서 this.form은 document.myForm을 참조하는 것으로 함수를 호출하는 버튼 즉 myButton이 속한 Form을 가리킨다.
valid(this)식으로 사용하면 this가 참조하는것은 document.myForm.myButton이 되는것이다
6.2.2) ID와 Password Validation 예제
[예제 설명] - 실행
사용자가 입력한 ID와 Password를 몇 가지 조건을 이용해서 검사한다.
ID는 반드시 입력을 받아야 하며 ID의 길이는 4~15 사이의 alphabet과 숫자만 허용한다. ID에는 공백문자를 허용하지 않는다.
암호는 4글자 이상 입력해야 하고 alphabet과 숫자만 허용하며, 공백문자는 허용하지 않는다.
[화면]
<HTML>
<HEAD>
<SCRIPT SRC="id_passwd.js">
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H3>ID와 Password Validation</H3>
<TABLE>
<TR>
<TD>ID</TD>
<TD><INPUT TYPE="text" NAME="id"></TD>
</TR>
<TR>
<TD>암호</TD>
<TD><INPUT TYPE="password" NAME="passwd"></TD>
</TR>
<TR>
<TH COLSPAN=2><INPUT TYPE="button"
VALUE="확인" onClick="valid(this.form)">
<INPUT TYPE="reset" VALUE="취소"></TH>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
[JavaScript File : id_password.js]
function valid(x)
{
var alphaDigit
= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
// ID Validation
if (x.id.value == "")
{
alert("ID를 입력해 주세요");
x.id.focus();
return;
}
if (x.id.value.length < 4 || x.id.value.length > 15)
{
alert("ID는 4~15자 이내여야 합니다.");
x.id.focus();
return;
}
if (x.id.value.indexOf(" ") >=0 )
{
alert("ID에는 공백이 들어가면 안됩니다.");
x.id.focus();
return;
}
for ( i=0; i < x.id.value.length; i++ )
{
if ( alphaDigit.indexOf(x.id.value.substring(i, i+1)) == -1 )
{
alert("ID는 영문과 숫자의 조합만을 사용할 수 있습니다.");
x.id.focus();
return;
}
}
// Password Validation
if ( x.passwd.value == "" )
{
alert("암호를 입력해 주세요");
x.passwd.focus();
return;
}
if ( x.passwd.value.length < 4 )
{
alert("비밀번호는 4자리 이상 입력하셔야 합니다.");
x.passwd.value="";
x.passwd.focus();
return;
}
if (x.passwd.value.indexOf(" ") >=0 )
{
alert("Password에는 공백이 들어가면 안됩니다.");
x.passwd.value="";
x.passwd.focus();
return;
}
alert("성공적으로 ID와 Password를 입력했습니다!");
}
6.2.3) 숫자 입력만 허용하는 예제
[예제 설명] - 실행
사용자가 숫자를 입력하지 않고 다른 문자를 입력한 경우 경고 메시지를 출력해 주는 예제이다. 전화번호나 우편번호 등 숫자만 사용되어야 하는 경우에 사용할 수 있다.
입력 Field에는 숫자와 하이픈(-)만을 허용하도록 한다.
[화면]
<HTML>
<HEAD>
<SCRIPT SRC="validation.js">
</SCRIPT>
</HEAD>
<BODY onLoad="document.emp.phone.focus(); document.emp.phone.select();">
<H3>전화번호를 입력하세요!"
<FORM NAME="emp" METHOD="post">
전화번호 : <INPUT TYPE="text" NAME="phone" MAXLENGTH="12">
<INPUT TYPE="button" VALUE="확인"
onClick="return validPhone(this.form.phone);">
</FORM>
</BODY>
</HTML>
[JavaScript File : validation.js]
function isNumber(x)
{
var isNum = true;
for ( inx=0; inx < x.length; inx++ )
{
if ( ( x.charAt(inx) < '0' || x.charAt(inx) > '9') && x.charAt(inx) != '-' )
isNum = false;
}
return isNum;
}
function validPhone(phone)
{
validPhoneNum = false;
if ( phone.value.length == 0 )
{
alert("전화번호를 입력하세요");
phone.focus();
}
else
{
if ( isNumber( phone.value ) )
{
alert("전화번호는 " + phone.value + " 입니다.");
phone.focus();
phone.select();
validPhoneNum = true;
}
else
{
alert("전화번호는 숫자와 -(하이픈)만 허용합니다.");
phone.focus();
phone.select();
}
}
return validPhoneNum;
}
사용자 입력의 타당성 검증 예제
[예제 설명] - 실행
성명과 내용은 반드시 입력되어야 하며, 어떠한 문자도 허용한다.
메일은 @과 .는 메일 ID에 반드시 포함되어야 한다. (단 이 예제에서는 @이나 .의 위치는 상관하지 않는다.)
[화면]
<HTML>
<HEAD>
<SCRIPT SRC="user_input.js">
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM NAME="guest" METHOD="post" ACTION="inform.html"
ENCTYPE="text/plain" onSubmit="return valid(this);">
<H3>방명록</H3>
<BR>
<TABLE>
<TR><TD>성명</TD>
<TD><INPUT TYPE="text" NAME="name" SIZE="25"></TD>
</TR>
<TR><TD>메일</TD>
<TD><INPUT TYPE="text" NAME="Email" SIZE="25"></TD>
</TR>
<TR><TD>내용</TD>
<TD><TEXTAREA NAME="remark" ROWS="7" COLS="40"></TEXTAREA></TD>
</TR>
<TR>
<TH COLSPAN=2><INPUT TYPE="submit" VALUE="보내기"></TH>
</TR>
</TABLE>
</FORM>
</CENTER>
</BODY>
</HTML>
[JavaScript File : user_input.js]
function valid(x)
{
if ( x.name.value == "" )
{
alert("이름을 입력하세요!");
x.name.focus();
return false;
}
if ( x.Email.value == "" )
{
alert("전자우편 주소를 입력하세요!");
x.Email.focus();
return false;
}
else if ( x.Email.value.indexOf('@') == -1 || x.Email.value.indexOf('.') == -1 )
{
alert("잘못된 Email주소입니다.\n정확한 주소를 입력하세요.");
x.Email.focus();
return false;
}
if ( x.remark.value == "" )
{
alert("내용을 입력해야 합니다." );
x.remark.focus();
return false;
}
else
return true;
}
[inform.html]
<HTML>
<BODY>
<FONT COLOR="#00008B">
<H3>방명록을 작성해 주셔서 감사합니다.</H3>
<H4>자세한 내용은 다음 과정에서....</H4>
<BR>
<A HREF="javascript:history.back();">이전으로</A> </FONT>
</BODY>
</HTML>
이미지 맵
 |
 |
 |
 |
글에 남긴 여러분의 의견은 개 입니다.