Crescendo Code
간단한 로그인 폼 만들기 #2 : 유효성 검사 본문
이전에 만들었던 폼에다 자바스크립트로 유효성 검사를 추가하려고 한다. ↓
간단한 로그인 폼 만들기 #1 : 구조 만들기
아이디, 비밀번호 입력란과 로그인 버튼이 있는 간단한 로그인 폼을 만들어 보려고 한다. CSS 활용 예시로나 볼만한 아주 간단한 디자인이기 때문에 기능적인 면은 참고가 어렵다. HTML/CSS를 이용
crescendo-code.tistory.com
▶ 기존 HTML 코드 ( loginForm.html )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoginForm</title>
<link rel="stylesheet" href="loginForm.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<form class="container">
<p>Login <i class="fa-solid fa-key"></i></p>
<label for="username">
<input type="text" id="username" name="username" placeholder="아이디">
</label>
<label for="password">
<input type="password" name="password" placeholder="비밀번호">
</label>
<button type="submit" class="btnLogin">로그인</button>
</form>
</body>
</html>
▶ 기존 CSS 코드 ( loginForm.css )
.container {
width : 300px;
height : 280px;
border : 1px solid black;
border-radius : 30px;
background-color : rgb(255, 235, 197);
padding : 0px 15px;
text-align : center;
box-sizing : border-box;
margin : 100px auto;
}
i {
font-size : 25px;
color : rgb(116, 116, 116);
}
p {
font-size : 30px;
font-weight : bold;
}
input {
width : 228px;
height : 36px;
margin-bottom : 10px;
background-color : #fff9e9;
border : 1px solid black;
border-radius : 5px;
padding-left : 15px;
box-sizing : border-box;
}
.btnLogin {
width : 150px;
height : 40px;
border-radius : 20px;
background-color : #373f3c;
border : 1px solid black;
color : white;
font-weight : bold;
margin-top : 10px;
margin-bottom : 20px;
}
먼저, 자바스크립트 코드를 작성할 파일을 생성하고 html 파일의 body 태그 안에서 연결시킨다.
<!-- loginForm.html -->
<script src="loginForm.js"></script>
이벤트 취소
아이디와 패스워드를 입력하고 '로그인' 버튼을 누르면 입력 값이 서버로 전송된다.
값을 전송하기 전에 올바른 아이디와 비밀번호 형식이 입력되었는지 확인 후 전송해야 하기 때문에, 우선 '로그인' 버튼을 눌렀을 때 서버로 값이 전송되는 링크 기능을 막아두는 것부터 시작한다.
// loginForm.js
const submitEl = document.querySelector( ".btnLogin" );
submitEl.addEventListener( "click", function( event ) {
event.preventDefault();
});
submit 타입의 로그인 버튼 태그 요소를 선택하고 addEventListener() 메서드를 통해 클릭 이벤트의 이벤트 객체를 불러냈다. 클릭 이벤트의 이벤트 객체가 가진 기능 중 preventDefault() 메서드는 기본적으로 부여된 링크 이벤트를 취소시키는 역할을 한다. 실제로 실행해보고 로그인 버튼을 클릭하면 아무 변화가 없음을 확인할 수 있다.
유효성 검사
로그인 버튼을 눌렀을 때 아이디와 비밀번호가 잘 입력되었는지 확인하는 코드를 작성하려고 한다.
// loginForm.js
const submitEl = document.querySelector( ".btnLogin" );
const formEl = document.forms[0];
submitEl.addEventListener( "click", function( event ) {
event.preventDefault();
const frmId = formEl.username;
const frmPw = formEl.password;
const idValue = formEl.username.value.trim();
const pwValue = formEl.password.value.trim();
if( idValue === "" ) {
alert( "아이디를 입력해 주세요." );
frmId.focus();
return;
}
if( pwValue === "" ) {
alert( "비밀번호를 입력해 주세요." );
frmPw.focus();
return;
}
this.submit();
});
- form 태그에 따로 name 속성을 지정하지 않았기 때문에 forms 속성을 통해 인덱스로 폼을 선택했다.
- idValue, pwValue 변수는 사용자의 입력값을 담는 변수이다. 이벤트 핸들러 밖에 코드를 작성하면 항상 빈 값("")을 변수에 할당하게 되므로 이벤트 핸들러 내에서 preventDefault() 메서드 다음에 작성할 수 있도록 한다.
- focus() 메서드는 자동으로 커서를 입력 요소로 가져가 활성화한다. 이를 위해 frmId, frmPw 변수를 생성했다.
this 키워드는 해당 이벤트의 요소 노드를 선택할 수 있다. '로그인 버튼'에 이벤트를 생성했기 때문에 this 키워드는 이 '로그인 버튼' 요소를 의미한다. if문으로 유효성 검사를 진행하고 해당되는 조건이 없다면 if 문을 모두 지나 this.submit() 코드에 도달하게 되어 사용자의 입력값을 서버에 전송할 수 있다.
조건에 해당된다면 if 문을 수행하고 return으로 if 문을 빠져나와 this.submit() 코드는 수행하지 않게 된다.
이번엔 아이디를 이메일 형식으로 입력할 수 있게 하고 비밀번호 길이 제한을 걸어보려고 한다.
위 코드의 if 문이 있는 곳에 아래에 있는 if 문을 추가로 작성해주면 된다.
// loginForm.js
if( idValue.indexOf( "@" ) === -1 ) {
alert( "아이디는 이메일 형식으로 입력해 주세요." );
frmId.focus();
return;
}
아이디의 이메일 방식 입력 기준으로 "@" 문자의 유무로 판단하기로 했다.
indexOf() 메서드는 문자열과 일치하는 첫 번째 문자의 인덱스를 반환하는 기능을 가지고 있다. 즉, 입력한 아이디에 여러 개의 "@"가 들어가도 가장 처음의 "@" 위치의 인덱스만 반환한다. 만약 특정 문자열을 찾지 못했다면 -1을 반환하는데 이는 찾고자 하는 문자열의 유무를 판단하는데 좋은 수단이 된다.
또는 아래와 같이 includes() 메서드를 사용할 수도 있다.
if( idValue.includes( "@" ) === false ) {
alert( "아이디는 이메일 형식으로 입력해 주세요." );
frmId.focus();
return;
}
includes() 메서드는 인자로 전달되는 문자열이 해당 문자열에 포함되어 있는지 여부에 따라 true, false 값을 반환한다.
if ( pwValue.length < 5 ) {
alert( "비밀번호는 5자리 이상 입력해 주세요." );
frmPw.focus();
return;
}
비밀번호 최소 길이 제한은 length 속성을 활용했다. 이를 통해 비밀번호의 최소, 최대 값을 지정할 수 있다.
↓ 완성 예제
See the Pen Untitled by 핵카 (@pectevsv-the-looper) on CodePen.
'Front-End > Javascript' 카테고리의 다른 글
| 논리 연산자 && (AND), || (OR) 비교하기 (0) | 2023.12.31 |
|---|
