기록
JSP 아이디, 비밀번호 가입 form 만들기 본문
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<title>form연습</title>
<script type="text/javascript">
//1) submit시 fn_check() 함수 실행 후 true일때 submit됨
//2) 비밀번호는 6자리 이상이어야함.
//3) 아이디는 3자리 이상이어야함
fn_check = function(){
console.log('눌렀다');
let password = $('#password').val();
let memId = $('#memId').val();
if(password.length>=6 && memId.length>=3){
return true;
}else{
alert("아이디 및 비밀번호의 길이를 확인해주세요");
$('#memId').focus();
return false;
}
}
//4) form0101_process.jsp로 폼 데이터를 전송하면 request 객체에 들어있는 memId, password name에
// 매핑된 value를 받아서 화면에 출력해보자
</script>
</head>
<body>
<div class="card" style="width: 18rem; ">
<div class="card-header">
<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"
name="remember-me" />
<label class="form-check-label" for="password">자동로그인</label>
</div>
<button type="submit" class="btn btn-primary">로그인</button>
</form>
</div>
</div>
</div>
</body>
</html>
'JSP' 카테고리의 다른 글
| JSP option의 선택한 value값으로 다른 option 값 바뀌게 하기(도서등록 form) (0) | 2023.01.02 |
|---|---|
| JSP 회원가입 입력폼 (0) | 2023.01.02 |
| JSP 내장 객체 request,response (2탄) (0) | 2022.12.28 |
| JSP 내장 객체 request,response (1탄) (0) | 2022.12.28 |
| JSP 페이지에 현재 시간 출력하기 (2022.12.27) (0) | 2022.12.27 |
'JSP' Related Articles
more
Comments