자바스크립트(JavaScript) 기초강좌

2009. 2. 20. 21:23 IT Computer Utility/ETC ·

자바스크립트(JavaScript) 기초강좌 - 6장. FORM

6장. Form

6.1) Form

<Form>태그의 유일한 목적은 클라이언트측에서 사용자로부터 수집된 데이터를 서버(Server)에 전송하는 것이다.

클라이언트 자체는 데이터를 처리할 만큼 강력하지 못하기 때문에 정보를 처리하는 것은 항상 서버의 몫이었다. 그러나 자바스크립트는 <FORM>태그에 강력한 처리 수단을 제공한다.

그러므로 자바스크립트를 이용하면 무조건 Server쪽으로 Data 처리를 넘기는 것이 아니라 Client에서 Validation을 하므로 Server의 부담을 줄일 수 있다.

Form객체의 속성(property)들은 다음과 같은 것이 있다.

* [형식]

- 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>

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>

<H4>자바누리 Site는 어떤 Language로 이루어졌을까요?</H4>

<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>

</HEAD>

<BODY>

<FORM>

<H3>ID와 Password Validation</H3>

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

<TH COLSPAN=2><INPUT TYPE="button"

VALUE="확인" onClick="valid(this.form)">

</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>

</HEAD>

<H3>전화번호를 입력하세요!"

전화번호 : <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>

</HEAD>

<BODY>

<FORM NAME="guest" METHOD="post" ACTION="inform.html"

ENCTYPE="text/plain" onSubmit="return valid(this);">

<BR>

<TABLE>

</TR>

</TR>

</TR>

<TR>

</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>

<H3>방명록을 작성해 주셔서 감사합니다.</H3>

<BR>

</BODY>

</HTML>

이미지 맵

태그

글에 남긴 여러분의 의견은 개 입니다.

이전다음글

2proo Life Story

Life Story

Photo Story

Culture Book Story

Useful Story

BLOG Story

BLOG Event

IT Computer Utility

Game Story

Wallpapers