순서 1. span 태그 추가 2. 이메일 형식 검사 메서드 3. 메서드 적용 4. 테스트 1. span 태그 추가 이메일 형식이 올바르지 않을 때 뜨는 경고글입니다. 클래스 속성명을 mail_input_box_warn으로 하였습니다. 위치는 클래스 속성명 final_mail_ck 인 span태그 바로 아래에 추가해줍니다. 2. 이메일 형식 검사 메서드 이메일 형식 검사 메서드에 JavaScript에서 제공하는 test() 메서드를 사용했습니다. 해당 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환합니다. 이름이 mailFormCheck이고 매개변수명이 email 인 메서드를 script 태그 내부에 작성합니다. /* 입력 이메일 형식 유효성 검사 ..
순서 1. 이름 유효성 검사 2. 이메일 유효성 검사 3. 인증번호 유효성 검사 4. 주소 유효성 검사 5. 최종 유효성 검사 및 전송 6. 테스트 1. 이름 유효성 검사 회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다. 코드를 해석하면 이름(name) 입력란이 아무것도 입력되지 않았을 때 span 태그가 보이도록 하고 nameCheck 변수는 false를 대입합니다. 이름(name) 입력란에 입력이 되어 있다면 span 태그는 사라지게 하고 nameCheck에 true를 대입합니다. /* 이름 유효성 검사 */ if(name == ""){ $('.final_name_ck').css('display','block'); nameCheck = false; }else{ $('.final_name_c..
순서 1. 비밀번호 유효성 검사 2. 비밀번호 확인 입력 검사 3. 비밀번호 확인 일치 검사 1. 비밀번호 유효성 검사 회원 가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다. 코드를 해석하면 비밀번호(pwd) 입력란에 아무것도 입력이 되지 않았을 때 span 태그가 보이도록 하고 pwCheck 변수에 false를 대입합니다. 비밀번호(pwd) 입력란에 입력이 되어 있다면 span 태그는 사라지게 하고 pwCheck 변수에 true를 대입합니다. /* 비밀번호 유효성 검사 */ if(pwd == ""){ $('.final_pw_ck').css('display','block'); pwCheck = false; }else{ $('.final_pw_ck').css('display', 'none'); pw..
순서 1. 유효성 검사 통과 유무 변수 선언 2. form 전송 막기 3. 입력값 변수 선언 4. span 태그 추가 5. 아이디 유효성 검사 6. 아이디 중복 검사 유효성 검사 1. 유효성 검사 통과 유무 변수 선언 스크립트 문 상단 부분에 아래의 코드와 같이 변수를 선언한 뒤 false로 초기화합니다. var idCheck = false;// 아이디 var nameCheck = false;// 이름 var phoneCheck = false;// 전화번호 var mailCheck = false;// 이메일 var mailnumCheck = false;// 이메일 인증번호 확인 var pwdCheck = false;// 비밀번호 확인 var addressCheck1 = false // 주소 2. form..
순서 1. 외부 스크립트 파일 연결 코드 추가 2. 주소 검색 기능 메서드 추가 3. 다음 주소 팝업창 코드 추가 4. 주소 입력창과 메서드 연결 5. 테스트 6. 주소 입력 예제 코드 추가 7. 테스트 1. 외부 스크립트 파일 연결 코드 추가 다음 주소록 API를 사용하기 위해 join.jsp에 외부 스크립트 파일을 연결하는 코드를 추가합니다. 2. 주소 검색 기능 메서드 추가 주소 API 기능을 사용하기 위한 메서드를 추가합니다. 이름은 execPostCode로 정했습니다. /* 다음 주소 연동 */ function execPostCode(){ } 3. 다음 주소 팝업창 코드 추가 메서드 내용에 주소를 검색하는 팝업창을 띄우는 코드를 추가합니다. (다음 주소 API 홈페이지에 있습니다. ) 4. 주소..
순서 1. 인증 번호 입력란 변환 기능 2. 인증 번호 일치 여부 검사 기능 3. 테스트 1. 인증 번호 입력란 변환 기능 인증 번호 입력란(mail_check_input)에 사용할 수 있도록 하기 위해 두 가지가 기능 실행되어야 합니다. ㄱ. 인증 번호 입력란 태그의 속성 disabled 속성 값이 변경. ㄴ. 인증 번호 입력란의 배경색 변경. 이 기능은 인증 번호 전송이 정상적으로 작동하였을 때만 진행이 됩니다. 그렇기 때문에 앞서 말한 두 가지 기능을 수행하는 명령 코드는 ajax 내에 있는 success코드에 작성되어야 합니다. success 코드 자체가 ajax가 정상적으로 진행이 완료되었을 때 작동하는 코드이기 때문입니다. 변경이 되어야 할 대상[$(".mail_check_input"), $(..
순서 1. 인증 번호(난수) 생성 2. 인증 번호 이메일 전송 3. 인증 번호 뷰(회원 가입 페이지)로 전송 1. 인증번호(난수) 생성 인증 번호로서 숫자 6자리를 사용할 것이고, 이를 위해서 JAVA에서 제공하는 Random객체를 사용했습니다. '자바 난수 생성'과 같은 키워드를 검색하시면 'for문을 이요한 난수 생성', '문자를 포함한 난수 생성'등 여러 가지 방법이 검색됩니다. 제가 참고한 블로그에선 단순히 기능을 구현하는 것이 목표였기 때문에 random 함수에서 생성하는 숫자를 바로 사용했습니다. 1-1 Random 클래스를 이용하여 객체 변수 random을 선언 /* 인증 번호(난수) 생성 */ Random random = new Random(); 1-2 random.nextInt()함수를 ..
순서 1. 이메일 전송 환경 세팅 2. 인증번호 입력란 색상 변경 및 disabled 속성 추가 3. 이메일 전송 메서드 추가(JavaScript) 4. controller 메서드 추가 1. 이메일 전송 환경 세팅 1-1 pom.xml 설정(라이브러리 추가) pom.xml에 아래의 두 개 라이브러리를 추가해줍니다. javax.mail mail 1.4.7 org.springframework spring-context-support ${org.springframework-version} 1-2 mailSender Bean 등록 제가 참고한 블로그에선 '메일 서버에 계정 인증 후 메일을 전송하는 방법'을 택했고, 이용한 이메일은 네이버 이메일이었기 때문에 네이버 이메일로 했습니다. root-context.xm..
