JSP - JavaScript 비밀번호 길이 검사하는 퀴즈 (2020-09-16)
2022. 9. 18. 22:30ㆍ3층 1구역 - 개발의 장/JSP
1. 서론
이제 배운 내용을 토대로 퀴즈같은 예제를 하나 풀어보자.
요구사항은 다음과 같다.
1-1. 아이디를 적지 않고 로그인 버튼을 클릭했을 때
1-2. 비밀번호를 입력하지 않고 비밀번호칸에 포커스를 잃었을 때
1-3. 비밀번호를 입력했으나 5자리 미만인데 포커스를 잃었을 때
1-4. 비밀번호를 5자리 이상 제대로 입력하고 포커스를 잃었을 때
2. 본론
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex27</title>
<script type="text/javascript">
function logclick() {
var id = document.getElementById("id").value;
if(id == "") {
alert("아이디는 필수 입력 정보입니다.")
return false;
}
}
function check_pw() {
var pw = document.getElementById("pass").value;
if(pw.length < 5 && pw.length > 1){
document.getElementById("check").innerHTML = "비밀번호는 5자리 이상입니다."
}else if(pw.length >= 5){
document.getElementById("check").innerHTML = "비밀번호가 잘 입력되었습니다."
}else{
document.getElementById("check").innerHTML = "비밀번호를 입력해주세요."
}
}
</script>
</head>
<body>
<!-- 아이디는 필수 정보라고 얼럿 띄울 것
비밀번호에 가 있으면 입력해달라 하고, 5자리 미만이면 비밀번호는 5자리라고 하고 5자리 이상이면 잘 입력 됐다.-->
<form name = "loginForm">
<label>아이디</label>
<input type = "text" id = "id"><br>
<label>비밀번호</label>
<input type = "password" id = "pass" onblur="check_pw()">
<p id = "check"></p>
<input type = "button" value = "로그인" onclick="logclick()">
<input type = "button" value = "취소">
</form>
</body>
</html>'3층 1구역 - 개발의 장 > JSP' 카테고리의 다른 글
| JS - 네이버 회원가입 페이지 베끼는 퀴즈(2022-09-21) (0) | 2022.09.20 |
|---|---|
| JSP - 확장자 별로 나누기 (2020-09-16) (0) | 2022.09.19 |
| JSP - JavaScript window.open, close (2020-09-16) (0) | 2022.09.18 |
| JSP - JavaScript Alert과 confirm (2020-09-16) (0) | 2022.09.18 |
| JSP - JavaScript 다음 페이지로 넘기기 (2022-09-16) (0) | 2022.09.18 |