Notice
Recent Posts
Recent Comments
Tags more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[javascript] 로그인 유효성 체크하기 (onsubmit 과 onkeydown) 본문

javascript

[javascript] 로그인 유효성 체크하기 (onsubmit 과 onkeydown)

http://portfolio.wonpaper.net 2020. 7. 20. 06:40

웹프로그램을 할때 아주 기본적인 유효성 검사 소스이다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
 
<form name="f1" method="post">
 
      <div class="formGroup">
        <label>아이디</label>
        <input type="text" id="user_id" name="user_id" maxlength="20" style="text-indent:1em;" onKeyDown="if(event.keyCode == 13) loginChk()">
      </div>
      <div class="formGroup">
        <label>비밀번호</label>
        <input type="password" name="passwd" maxlength="20" style="text-indent:1em;" onKeyDown="if(event.keyCode == 13) loginChk()">
      </div>
      <button type="button" class="btnSubmit" onclick="loginChk()">로그인</button>
 
 
</form>
<script>
function loginChk() {
    var form = document.f1;
    if (!form.user_id.value) {
        alert("아이디를 입력해 주십시오.");
        form.user_id.focus();
        return;
    }
 
    if (!form.passwd.value) {
        alert("비밀번호를 입력해 주십시오.");
        form.passwd.focus();
        return;
    }
    form.action = "login_ok.php";
    form.submit();
}
</script>
</body>
</html>
 
 cs

위의 소스를 보면 text박스 안에 onKeyDown 이벤트로 엔터키를 칠때마다.

if(event.keyCode == 13) loginChk()   를 실행하여 유효성을 검사하도록 하였다.

 

 

간혹 다른 자바스크립트 소스에 따라서 return false 처리를 해주어야 하는 경우도 있으니 이럴때는 다음과 같이 붙여 주도록 하자.

 

onKeyDown="if(event.keyCode == 13){ secretChk('<?=$no?>');return false;}"

 

 

 

 

 

'javascript' 카테고리의 다른 글

[javascript] 네이버지도 연동하기 ( Naver Map )  (0) 2020.09.11
[javascript] Button 클릭시 submit 되는 현상 막기  (0) 2020.08.05
[javascript] 숫자 세자리마다 쉼표 찍기  (0) 2020.05.17
[javascript] 부모창을 새로고침 refresh 시킬때 - opener.location.reload()  (0) 2020.04.25
[javascript] 타이머 구현 - Timer Progress Bar 진행바 형태  (0) 2020.03.14
'javascript' Related Articles more
Comments