웹 사이트에서 submit을 하기 전 입력받은 데이터의 유효성을 검사해야하는 경우가 있다.
여러가지 방법이 있겠지만 이 글에서는 form 태그에 onsubmit 속성을 사용하는 방식으로 구현해보았다.
<body>
<div class="card" style="width: 18rem;">
<div class="card-body">
<div class="bd-example">
<form action="form0101_process.jsp" method="post" onsubmit="return fn_check()">
<div class="mb-3">
<label for="memId" class="form-label">아이디</label>
<input type="text" class="form-control" id="memId" name="memId"
aria-describedby="idHelp" placeholder="아이디를 입력해주세요."
required/>
</div>
<div class="mb-3">
<label for="password" class="form-label">비밀번호</label>
<input type="password" class="form-control" id="password"
name="password" placeholder="비밀번호를 입력해주세요." required/>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember-me"/>
<label class="form-check-label" for="remember-me">자동 로그인</label>
</div>
<button type="submit" class="btn btn-primary">로그인</button>
</form>
</div>
</div>
</div>
</body>
form 태그에 onsubmit 속성을 사용해 submit 되기 전 fn_check() 라는 함수를 호출한다.
함수 앞에 붙은 return 이라는 키워드를 통해 fn_check()의 반환값을 받아오는데
이 반환값이 true일 경우 submit이 수행되고 false일 경우 수행되지 않는다.
function fn_check(){
var memId = document.querySelector('#memId').value;
if(memId.trim().length < 3){
alert("아이디를 3자리 이상 입력해주세요.");
return false;
}
var password = document.querySelector('#password').value;
if(password.trim().length < 6){
alert("비밀번호를 6자리 이상 입력해주세요.");
return false;
}
return true;
}
함수에서는 입력값의 길이를 검사한다.
아이디는 3자리 이상, 비밀번호는 6자리 이상 입력해야 true가 반환되어 submit이 수행된다.
조건을 만족하지 않으면 false가 반환되어 submit이 수행되지 않는다.
'JavaScript > JavaScript' 카테고리의 다른 글
| [Javascript] 자바스크립트의 NaN (0) | 2023.01.01 |
|---|---|
| [Javascript] 변수 호이스팅 (Variable Hoisting) (0) | 2023.01.01 |
| [Javascript] 자바스크립트 정규식 (글자수만 제한하기) (0) | 2022.12.30 |
| [Javascript] 이전 페이지 URL 가져오기 (0) | 2022.12.27 |
| [Javascript] 입력창에서 엔터키 입력 시 이벤트 (0) | 2022.12.27 |