JSP - 로그인 페이지 프로젝트(4)

오늘은 폼체크를 공부하고
폼체크 기능을 추가했다.

Formcheck 기능은 양식에 맞는지 체크해주는 것이다.
이 모든것을 JSP 파일로 만들면 서버에 부하도 크고 용량도 많이 차지하게 되므로
간단한 체크같은 경우
Java Script로 작성하여 체크해준다.

로그인 화면에서 폼체크
1. 아이디가 적혔는지
2. 비밀번호가 적혔는지
+ 추가기능
로그인 화면이 뜨면, 아이디 입력 칸에 커서가 깜빡깜빡이기.

(폼체크 코드)

1. onload
: 이 기능으로 body부분이 열릴때 실행된다.
focus()기능은 커서가 깜빡깜빡이는 기능이다.
form 에 name속성을 추가하여 document.loginForm.id에 focus 기능을 추가했다.

2. onsubmit
: submit이 눌릴때 체크하게 된다. return을 쓰고 formCheck()를 써서
formCheck반환 값은 true, false로 해준다.
formCheck함수는 위에 자바스크립으로 작성해주었다.
입력 형식에 맞으면 true
그렇지 않으면 false를 반환해준다.

(실행결과)

(실행결과)

실행결과
아이디 혹은 비밀번호가 입력되지 않으면 위와같이 오류 메세지를 출력해준다.

이 기능은 회원가입 형식에도 사용할 것이다.
그러므로 자바스크립 파일을 따로 만들어 줄것이다.

(자바스크립트 파일)

자바 스크립트 파일에 위에 스크립트 부분을 그대로 옮겨준다.

그 후 이 함수를 사용할 곳에서는
아래와 같이 연결해주면 된다.

(자바스크립트 연결)

이제 회원가입페이지에서 이 기능을 사용해보겠다.
똑같이 자바 스크립트파일을 지정해준 후
submit을 누를때 체크하는 형식으로 해주었다.

(회원가입페이지)

(실행 결과)

(실행 결과)

실행결과
폼체크가 회원가입페이지에서도 잘 적용됬다.

:)

이제 이 기능에서 아이디 중복확인을 추가해보려했다.

(자바스크립트)

(회원가입 코드)

(실행결과)

위와 같은 실행결과 까지는 성공했지만
자바스크립트에서 데이터를 받아오는데 문제가 있었다.
자바스크립트가 자바랑 조금 미묘하게 달라서
자바스크립트만 따로 공부를 해서 추가해야할 것 같다.
ㅜㅜ