1101 [Sakila]로그아웃, 유효성 검사
깃허브 내려받기
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
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()
