novalidate

• 검증 기능 비화설화

• 웹 브라우저 자체가 검증하지 못하게 한다

• signup-form.jsp 코드 수정

<%-- 웹브라우저의 자체 폼 검증기능 비활성화  <form  novalidate> --%>
<form action="signup.jsp" method="post" novalidate>
	<div class="mb-2">
		<label class="form-label" for="userName">아이디</label>
		<input class="form-control" type="text" name="userName" id="userName"/>
		<small class="form-text">영문자 소문자로 시작하고 5글자~10글자 이내로 입력하세요</small>
		<div class="valid-feedback">사용 가능한 아이디 입니다.</div>
		<div class="invalid-feedback">사용할 수 없는 아이디 입니다.</div>
	</div>
	<div class="mb-2">
		<label class="form-label" for="pwd">비밀번호</label>
		<input class="form-control" type="password" name="pwd" id="pwd"/>
		<small class="form-text">특수 문자를 하나 이상 조합하세요.</small>
		<div class="invalid-feedback">비밀 번호를 확인 하세요</div>
	</div>
	<div class="mb-2">
		<label class="form-label" for="pwd2">비밀번호 확인</label>
		<input class="form-control" type="password"  id="pwd2"/>
	</div>
	<div class="mb-2">
		<label class="form-label" for="email">이메일</label>
		<input class="form-control" type="email" name="email" id="email"/>
		<div class="invalid-feedback">이메일 형식에 맞게 입력하세요.</div>
	</div>
	<button class="btn btn-primary btn-sm" type="submit" disabled>가입</button>
</form>

정규 표현식

[a-z] : 영문자 소문자 한 글자
➜ 대괄호는 한글자 안에 있는건 후보군

. : 아무거나 한 글자
{4,9} : 최소 4번, 최대 9번 반복 (띄어쓰기는 X)

• signup-form.jsp 코드 추가

document.querySelector("#userName").addEventListener("input", (e)=>{
	// 현재까지 입력한 아이디를 읽어온다.
	const inputId = e.target.value;
	// "영문자 소문자로 시작하고 5글자~10글자 이내로 입력" 이 검증조건을 만족했는지 여부를 알아낸다
	const reg = /^[a-z].{4,9}$/;
	// 만일 정규 표현식을 통과 하지 못했다면 
	if(!reg.test(inputId)){
		e.target.classList.remove("is-valid");
		e.target.classList.add("is-invalid");
		return; //함수를 여기서 종료하기 
	}
	// fetch() 함수를 이용해서 get 방식으로 입력한 아이디를 보내고 사용가능 여부를 json 으로 응답받는다.
	fetch("check-id.jsp?inputId="+inputId)
	.then(res=>res.json())
	.then(data=>{
				
	});
});

⭐ test 함수를 주로 활용

• check-id.jsp 생성

<%
	// get 방식으로 파라미터로 넘어오는 입력한 id 을 읽어온다
	String inputId = request.getParameter("inputId");
	// dao 를 이용해서 해당 정보가 있는지 select 해본다 (null 일 가능성 존재)
	UserDto dto = UserDao.getInstance().getByUserName(inputId);
	// 아이디 사용 가능 여부 알아내기
	boolean canUse = dto == null ? true : false;	
%>

• json 문자열을 응답한다고 contentType 변경

contentType="application/json;

html 로직 지우기

{"canUse":<%=canUse %>}

➜ 응답되는 문자열은 {"canUse":true} or {"canUse":false}

• signup-form.jsp 코드 추가

// fetch() 함수를 이용해서 get 방식으로 입력한 아이디를 보내고 사용가능 여부를 json 으로 응답받는다.
fetch("check-id.jsp?inputId="+inputId)
.then(res=>res.json())
.then(data=>{
	// 일단 is-valid , is-invalid 클래스를 제거하고
	e.target.classList.remove("is-valid", "is-invalid");
	// data 는 {canUse:true} 또는 {canUse:false} 구조의 object 이다
	if(data.canUse){ //사용가능 하다면
		e.target.classList.add("is-valid");
	}else{//사용가능 하지 않다면 
		e.target.classList.add("is-invalid");
	}
});

• SecurityFilter 화이트리스트 추가

"/user/check-id.jsp"