폼 유효성 검사(아이디, 비밀번호)
<html>
<head>
<meta name="viewport" content="width=device-width;" charset="utf-8" />
<title>폼 유효성 검사 : 아이디 및 암호 체크</title>
<style type="text/css">
div, td, input{color:Navy; font-size:9pt; font-family:"맑은 고딕" Verdana 굴림;}
</style>
<script language="javascript" type="text/javascript">
//자바스크립트는 html의 form, button, textbox등 들을 하나의 객체로 보고 id와 name으로 접근이 가능하다.
function CheckForm(){
//[1] 아이디 텍스트 박스에 접근해서 txtUserID 변수로 객체 담기
var txtUserID = window.document.FrmLogin.txtUserID;
if(txtUserID.value == ""){ //아이디가 입력되지 않았다면
alert("아이디를 입력하시오.");
return false; //진행하지 말고 대기(submit이벤트 중지)
}
//[2] 암호체크
if(document.FrmLogin.txtPassword.value=""){
alert("암호를 입력하시오.");;
return false;
}
}
</script>
</head>
<body>
<!-- form은 post방식을 사용하도록 권장: 데이터가 URL에 노출되므로..-->
<form id="FrmLogin" name="FrmLogin" action="sun/defalt." method="post" onsubmit="return CheckForm();">
<!-- submit이라는 이벤트를 잡을려면 onsubmit이라는 이벤트 핸들러를 사용해야하며 "return 함수명"으로 적는다. -->
<div align="center">
<table border="1" width="300">
<tr>
<td align="right">아이디:</td>
<td><input type="text" id="txtUserID" name="txtUserID" /></td>
<!-- id와 name속성은 될수 있도록 같게 써준다. -->
</tr>
<tr>
<td align="right">암호:</td>
<td><input type="Password" id="txtPassword" name="txtPassword" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="로그인" />
<input type="reset" value="취소" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
submit을 button으로 바꾸고 조금 심화시켜 만들어 봅시다~
| <script language="javascript" type="text/javascript"> function CheckForm(){ var txtUserID = document.FrmLogin.txtUserID; if((txtUserID.value == "") || txtUserID.value.length<3 || txtUserID.value.length>12){ alert("아이디를 입력하시오."); document.FrmLogin.txtUserID.focus(); //해당 객체에 커서 포커스:커서가도록 //document.FrmLogin.txtUserID.select(); //해당 객체 텍스트 블록 영역 선택 document.getElementById("txtUserID").select(); return false; } else{ document.FrmLogin.action = "./asp/Deault.aspx"; //action속성을 동적으로 변경 document.FrmLogin.submit(); //폼의 내용을 action 속성 URL로 전송 } } </script> |
| <form id="FrmLogin" name="FrmLogin" action="" method="post"> |
| <input type="button" value="로그인" onclick="CheckForm();"/> |
'Programming > Javascript' 카테고리의 다른 글
| 이벤트 정리 (0) | 2013.01.01 |
|---|---|
| 폼 유효성 검사2(submit&button 비교) (0) | 2013.01.01 |
| history 객체 메서드&속성 (0) | 2013.01.01 |
| location 객체 속성&메서드 (0) | 2012.12.30 |
| document 객체 속성&메서드 (0) | 2012.12.30 |
