참조 및 번역 : 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}
}
}

전체적인 스크립트는 다음과 같습니다.
[#M_ more.. | less.. |
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"
onsubmit="return validate_form(this)"
method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>
_M#]
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}
}
}

전체적인 코드는 다음과 같습니다.
[#M_ more.. | less.. |
<html>
<head>
<script type="text/javascript">
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}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"
onsubmit="return validate_form(this);"
method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>
_M#]