project 2.3 My first website/ 회원가입 페이지

정규식을 할 수 있는 회원가입페이지

결과는 아래와 같이 나온다

 

 

 

 

지금 정규식검사가 진행되는 div 가 동적이 아닌,,, 내맘대로 패딩을 대충 중간으로 우겨넣었기 때문에 이게 창사이즈마다 웃기게작용됨ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ진짜ㅠㅠ 프론트엔드 개발자분들 존경합니다..

 

 

무튼 본론으로 들어가서

오늘도 view부터

 

1. view (join.jsp)

정규식 검사를 진행한 건: id, pw, confirm pw, email, phone

어짜피 다 비슷한 형식으로 가기 때문에 제일 힘들었던? 복잡했던? 비밀번호 체크만 올린다.

* 모든 정규식은 전부 페이지로드 이벤트 함수에 걸려있음

 

//  2. 비밀번호 체크

//    8 ~ 20 사이의 대문자, 소문자, 숫자, 특수문자(~!@#$%^&*)를 사용한다.

// 소문자, 숫자 필수 나머지는 넣어도되고 안넣어도 됨. 

 

var regExpPw = /^(?=.*[a-zA-Z~!@#$%^&*()_+|<>?:{}])(?=.*[0-9]).{8,}$/; 

 

function pwInputCheck() {

if ( $('#mPw').val() != $('#mPw2').val() ) {  // 둘 다 동일하게 입력하지 않았다면,

$('#pwConfirmResult').text('Those passwords didn\'t match. Try again.');

$('#pwConfirmResult').css('color', '#dc3545').css('font-size', '15px');

pwPass = false;

} else {  // 둘 다 동일하게 입력했다면,

$('#pwConfirmResult').text('Matched'); 

$('#pwConfirmResult').css('color', '#17a2b8').css('font-size', '15px');

pwPass = true;  // 비밀번호 체크 통과

}

}

 

$('#mPw').keyup(function() {

 

pwInputCheck();

 

if ( regExpPw.test($('#mPw').val()) ) {

$('#pwCheckResult').text('Valid Password');

$('#pwCheckResult').css('color', '#17a2b8').css('font-size', '15px');

} else {

$('#pwCheckResult').text('Use 8 or more characters with a mix of letters, numbers & symbols');

$('#pwCheckResult').css('color', '#dc3545').css('font-size', '15px');

}

 

});

 

$('#mPw2').keyup(pwInputCheck);

 

 

 

2. Controller

case "/join.member" :

ajaxCommand = new JoinCommand();

result = ajaxCommand.execute(request, response);

out.print(result);

break;

 

 

3. Command

* 기본이 되는 ajaxcommand interface

public interface AjaxCommand {

public String execute(HttpServletRequest request, HttpServletResponse response)throws Exception;

}

 

쿼리에서짜준대로 mDto에 차곡차곡 넣어줌 

 

 

6. Dao

sql에 맵퍼대로 mDto를 인서트해주고, 그 결과값이 0보다 크면 커밋한다.

 

public int memberInsert(MemberDto mDto) {

SqlSession ss = factory.openSession(false); //select가 아닐땐 무조건 false

int result = ss.insert("mybatis.mapper.member.memberInsert",mDto);

if (result >0) {

ss.commit();

}

ss.close();

return result;

}

 

 

5. xml

 

<insert id="memberInsert" parameterType="dto.MemberDto">

INSERT

  INTO MEMBER2

VALUES (MEMBER2_SEQ.NEXTVAL, #{mId}, #{mPw}, #{mName}, #{mEmail}, #{mPhone}, #{mAddress}, SYSDATE) 

</insert>