728x90
반응형
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- src/main/webapp/view/member/memberInput.jsp : 회원가입화면--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<%-- ${pageContext.request.contextPath} : 웹어플리케이션이름. 프로젝트명 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<script type="text/javascript">
function win_upload() {
const op = "width=500, height=150, left=150, top=150";
open ('${path}/member/pictureForm', "", op);
}
function idChk() {
//const : 자바스크립트의 상수 선언
const id = document.f.id.value
// <span id="result">...
let result = document.querySelector("#result")
const param = "id" + id
if (id.length < 8) {
result.style.color='red'
result.innerHTML="id는 8자리 이상입니다."
} else {
console.log('aa');
$.ajax({ //서버에 사용가능한 아이디여부 검증
url : "${path}/member/idchk",
data : "id=" + id,
success : function(chk) {
console.log('bb', chk);
//chk : "false" || "true"
//chk.trim() : 양쪽의 공백 제거
if (chk.trim() == 'false') { //데이터베이스에 id값이 없는 경우
result.style.color='blue'
result.innerHTML="사용 가능한 id 입니다."
document.f.chk.value="ok"
} else {
result.style.color='red'
result.innerHTML="사용중인 id 입니다."
document.f.chk.value="no"
}
}
})
}
}
/*
* 유효성 검증
* id의 길이가 8자리 미만이면 오류 (submit 안됨).
* 비밀번호가 입력되지 않은 경우 오류 (submit 안됨).
* 이름이 입력되지 않은 경우 오류 (submit 안됨).
* 성별이 입력되지 않은 경우 오류 (submit 안됨).
* chk 파라미터의 값이 ok가 아닌경우 오류 (submit 안됨).
*/
function inputChk(f) {
let result = document.querySelector("#result")
if (f.id.value.length < 8) {
alert(result.innerHTML)
f.id.focus()
return false; //기본(submit)이벤트 기능을 취소
}
if (f.pass.value == '') {
alert("비밀번호를 입력하세요")
f.pass.focus()
return false;
}
if (f.name.value == '') {
alert("이름을 입력하세요")
f.name.focus()
return false;
}
if (f.gender.value == '') {
alert("성별을 선택하세요")
return false;
}
if (f.chk.value != 'ok') {
alert(result.innerHTML)
f.id.focus()
return false;
}
}
</script>
</head>
<body>
<hr>
<div class="container" style="width:80%;" >
<h2 id="center">회원가입</h2>
<form action="${path}/member/memberPro" method="post" name="f" onsubmit="return inputChk(this)">
<input type="hidden" name="picture" >
<input type="hidden" name="chk" >
<div class="row">
<div class="col-3bg-light">
<img src="" width="100" height="120" id="pic"><br>
<button type="button" class="btn btn-dark" onclick="win_upload()">사진등록</button>
</div>
<div class="col-9">
<div class="form-group">
<label for="id">아이디: <span id="result">8자리 이상 가능 합니다</span></label>
<input type="text" class="form-control" name="id" onkeyup="idChk()">
<br>
<label for="pwd">비밀번호:</label>
<input type="password" class="form-control" name="pass">
<label for="name" >이름:</label>
<input type="text" class="form-control" name="name">
<label for="gender">성별:</label>
<label class="radio-inline"> </label>
<input type="radio" name="gender" value="1">남
<label class="radio-inline"> </label>
<input type="radio" name="gender" value="2">여
</div> </div> </div>
<div class="form-group">
<label for="tel">전화번호:</label>
<input type="text" class="form-control" name="tel">
</div>
<div class="form-group">
<label for="tel">이메일:</label> <input type="text" class="form-control" name="email">
</div>
<div id="center" style="padding: 3px;">
<button type="submit" class="btn btn-dark">회원가입</button>
</div>
</form>
</div>
</body>
</html>728x90
반응형
'study > MVC' 카테고리의 다른 글
| [MVC] 18. MVC Model2방식 - 회원가입 (회원관리) (0) | 2022.04.14 |
|---|---|
| [MVC] 18. MVC Model2방식 - 회원가입 (로그인) (0) | 2022.04.14 |
| [MVC] 18. MVC Model2방식 - 회원가입 (로그인 만들기) (0) | 2022.04.14 |
| [MVC] 16. MVC Model1 방식 - 회원가입 (비밀번호변경) (0) | 2022.04.12 |
| [MVC] 16. MVC Model1 방식 - 회원가입 (비밀번호찾기) (0) | 2022.04.12 |