Whiteship's Note

JavaScript Form Validation

AJAX/JavaScript : 2007.07.09 17:52


참조 및 번역 : http://www.w3schools.com/js/js_form_validation.asp

자바스크립트 폼 검증

자바스크립트를 사용하여 HTML 폼에 입력된 데이터를 서버로 보내기 전에 검증할 수 있습니다.

폼 데이터는 일반적으로 자바스크립트를 사용하여 다음의 것들을 확인합니다.

    * 필수 속성을 빈 값으로 뒀는지?
    * 유효한 e-mail 주소를 입력했는가?
    * 유효한 날짜를 입력했는가?
    * 숫자를 입력해야할 곳에 문자를 입려하진 않았는지?

필수 속성 확인

아래의 함수는 입력 필드가 비어있는 상태가 아닌지 확인합니다. 만약에 비어있으면 경고 창에 메시지를 출력하고 false를 반환합니다. 만약에 값이 입력 됐으면 true를 반환합니다.

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

전체적인 스크립트는 다음과 같습니다.

E-mail 검증

아래의 함수는 일반적인 email 형식을 갖춘 문자열을 입력했는지 확인합니다.

이 말은 입력한 데이터가 반드시 @ 과 . 를 가지고 있는지 확인합니다. 그리고 @는 첫 번째 글자가 되면 안되고 마지막으로 . 은 @ 바로 앞에 위치해야 합니다.

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
  {alert(alerttxt);return false}
else {return true}
}
}


전체적인 코드는 다음과 같습니다.

'AJAX > JavaScript' 카테고리의 다른 글

1장~6장 정리  (0) 2008.04.04
자바스크립트 튜토리얼 정리 끝  (4) 2007.07.10
JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
top

  1. Favicon of http://blog.creorix.com BlogIcon Creorix 2007.07.09 20:03 신고 PERM. MOD/DEL REPLY

    원문과 다른 부분이 한 곳 있군요. "마지막으로 . 은 @ 바로 앞에 위치해야 합니다." 이 부분이 원문에는 "the last dot must at least be one character after the @ sign.", 즉 마지막 점이 적어도 @보다 1글자 이상 뒤에 있어야 한다고 되어 있네요 :) 코드로 보았을 때에도 마지막 점의 위치와 @의 위치가 2 이상 차이나는지를 확인하는 것이기 때문에 이렇게 바꾸는 것이 맞을 듯 싶습니다.

    그리고 원문에도 같게 나오기는 했지만 값이 비었는지 검사할 때 공백 문자만 있을 가능성도 있기 때문에 value가 ""인지 검사하는 것보다는 trim(value)가 ""인지 검사하는 것이 더 좋을 것 같습니다 :)

    p.s. 정규 표현식으로 하면 좀 더 간단하게 바꿀 수 있습니다 :)

    Favicon of http://whiteship.tistory.com BlogIcon 기선 2007.07.09 22:31 PERM MOD/DEL

    아항;; 너무 달리다 보니 말도 안되게 번역하는 실수를.. 흑흑 그런 뜻이 였군요.

    거기에 더해 공백 체크를 위한 팁까지.. 와오 감사합니다. :)

    http://blog.creorix.com/15

    잘 참조하겠습니다. :)

Write a comment.




: 1 : 2 : 3 : 4 : 5 : 6 : 7 : 8 : 9 : 10 : ··· : 30 :