푸들푸들

1101 [Sakila]로그아웃, 유효성 검사 본문

구디아카데미/JAVA

1101 [Sakila]로그아웃, 유효성 검사

COCO_develop 2024. 11. 1. 11:50

깃허브 내려받기

Team > Fetch from origin

Team > Remote > Fetch From

-> Team > Pull (원격지 코드 내려받기)

 

jQuery

https://www.w3schools.com/jquery/default.asp

 

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://api.jquery.com/

 

jQuery API Documentation

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t

api.jquery.com

 

로그아웃

LoginController.java

@Slf4j
@Controller
public class LoginController {
	@Autowired private StaffMapper staffMapper;
	
	// 로그아웃
	@GetMapping("/on/logout")
	public String logout(HttpSession session) {
		session.invalidate();
		log.debug("로그아웃 성공");
		return "redirect:/off/login";
	}
}

log.debug("로그아웃 성공"); 

-> console 창 :DEBUG 7200 [sakila] [p-nio-80-exec-9] c.e.sakila.controller.LoginController 로그아웃 성공

 

 

로그인 입력값 유효성 검사

<body class="container">
	<h1>Staff Login</h1>
	<span>${msg}</span>

	<form id="form" action="${pageContext.request.contextPath}/off/login" method="post">
		<div class="mb-3 mt-3">
			<label for="staffId" class="form-label">Staff Id</label>
			<input id="staffId" name="staffId" type="text" class="form-control">
	 	</div>
	 	<div class="mb-3">
			<label for="password" class="form-label">Password</label>
			<input id="password" name="password" type="password" class="form-control">
		</div>
		<button id="btn" type="button" class="btn btn-primary">로그인</button>
	</form>
</body>
<script>
	// btn 버튼 클릭 시 폼값 유효성 검사 (Id: 숫자, Pw: 4자 이상)
	$('#btn').click(function(){
		console.log('click');
		 // 숫자가 아니면 isNaN() or $.isNumeric()
		if($.isNumeric($('#staffId').val()) == false){
			alert('Staff Id는 숫자만 입력 가능');
		} else if($('#password').val().length < 4){
			alert('Password는 4자 이상');
		} else {
			$('#form').submit();
		}
	});
</script>

$.isNumeric($('#staffId').val()) -> jQuery api

 : staffId의 value값이 숫자인가

<id="staffId"> -> #staffId

staffId에 사용자가 입력한 값(value값) -> $('#staffId').val()

 

 

'구디아카데미 > JAVA' 카테고리의 다른 글

Spring 설치  (1) 2024.11.02
1101 [Sakila] staffOne  (2) 2024.11.01
1031 [Sakila] Spring 로그인  (1) 2024.11.01
1031 Github Token 발급, Commit, Push, 내려받기  (0) 2024.10.31
1030 Spring 기본  (0) 2024.10.30
'구디아카데미/JAVA' Related Articles more