[javascript]정규식 활용 회원가입 기능(아이디 중복확인, 요소 입력확인) [펌]

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

개발자의 끄적끄적

[javascript]정규식 활용 회원가입 기능(아이디 중복확인, 요소 입력확인) [펌] 본문

개발/javascript & jquery

[javascript]정규식 활용 회원가입 기능(아이디 중복확인, 요소 입력확인) [펌]

효벨 2020. 8. 23. 01:00

728x90

[javascript]정규식 활용 회원가입 기능(아이디 중복확인, 요소 입력확인) [펌]

1. 목표

1. 개발환경

> Spring Boot 2.1.7, JDK 8

2. JavaScript, jQuery, 정규식을 활용해 회원가입 기능 구현

> 뷰 요소 : ID, 이름, 비밀번호, 비밀번호 확인, 이메일

> 정규식 활용 뷰 요소 :

- ID : 영소문자, 영대문자, 숫자만 가능하게끔 설정. 공백 포함 불가.

- 이름 : 공백 포함 불가.

- 이메일 : 이메일 형식에 맞게끔 설정(aaa@bbbb.bbb)

2. 기능

1. ID 중복체크

> ID 입력란에 키다운 이벤트가 발생하면 ajax 통신을 통해 중복된 아이디인지 판별

> 중복되지 않은 아이디인 경우에만 회원가입 버튼 활성화

2. 입력요소 빈 칸 체크

> ID, 이름, 비밀번호가 비어있는지 체크

> 비어있지 않은 경우에만 회원가입 버튼 활성화

3. 소스코드

1. 뷰(regi.jsp)

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:requestEncoding value="utf-8"/>

<!DOCTYPE html>

<html>

<head>

<tiles:insertAttribute name="header"/>

<title>Insert title here</title>

</head>

<body>

<c:choose>

<c:when test="${memberType == 2 }">

교수자 회원가입

</c:when>

<c:otherwise>

학생 회원가입

</c:otherwise>

</c:choose>

</div>

사용 가능한 아이디입니다.

</div>

사용할 수 없는 아이디입니다.

</div>

사용 가능한 성함입니다.

</div>

사용할 수 없는 성함입니다.

</div>

<label for="inputEmail">Email 주소</label>

사용할 수 있는 이메일입니다.

</div>

사용할 수 없는 이메일입니다.

</div>

사용 가능한 비밀번호입니다.

</div>

비밀번호는 5자 이상으로 입력해주세요.

</div>

비밀번호가 일치합니다.

</div>

두 비밀번호가 일치하지 않습니다.

</div>

<c:if test="${memberType == 2 }">

</div>

</c:if>

<c:choose>

<c:when test="${memberType == 2 }">

</c:when>

<c:otherwise>

</c:otherwise>

</c:choose>

</div>

</form>

</div>

</body>

</html>

Colored by Color Scripter

2. 자바스크립트(regi.js)

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

/**

$(function(){

//context path

var ctx = window.location.pathname.substring(0, window.location.pathname.indexOf("/",2));

//값 초기화. 회원가입 버튼 비활성화

$("#btnConfirm").prop("disabled",true);

var idOk = false;

var pw1Ok = false;

var pw2Ok = false;

var nameOk = false;

var emailOk = false;

var isOk = false;

//정규식 활용 id 체크(영소문자+숫자 5자 이상)

$("#inputIdInSignup").keyup(function(){

//배열 초기화

var viewData = {};

var inputTxt = $("#inputIdInSignup").val();

//data[키] = 밸류

viewData["id"] = inputTxt;

var chkOnlyEngNum = /^[a-zA-Z0-9_-]{5,15}$/;

if( chkOnlyEngNum.test( inputTxt ) || inputTxt.length > 4){

//정규식 조건을 통과한 경우

$("#signupWarn").text( '　' );

//Ajax 활용 ID 중복체크, 중복이 아니면? true = 사용가능 ID

var varIsNotDupId = false;

//초기값 valid 적용

$("#inputIdInSignup").removeClass("is-invalid");

$("#inputIdInSignup").addClass("is-valid");

$.ajax({

type: "POST"

, async: false

, contentType:'application/json'

, url: ctx + '/regi/findid'

, datatype: "json"

, data: JSON.stringify(viewData)

, success: function( data ){

if( data === '0' ){

//컨트롤러에서 넘어온 결과가 0인 경우 사용 가능한 아이디로 판단

//alert('ok data 트루라고 했다');

$("#inputIdInSignup").removeClass("is-invalid");

$("#inputIdInSignup").addClass("is-valid");

varIsNotDupId = true;

idOk = true;

$("#signupWarn").text( '　' );

isOk = allOk( idOk, pw1Ok, pw2Ok, nameOk, emailOk );

if( isOk == true ){

$("#btnConfirm").prop("disabled",false);

}

$("#chkAllOk").text(idOk + ', ' + pw1Ok + ', ' + pw2Ok + ', ' + nameOk + ', ' + emailOk + '마지막 idOk:' + isOk );

}else{

//중복된 ID인 경우

$("#inputIdInSignup").removeClass("is-valid");

$("#inputIdInSignup").addClass("is-invalid");

idOk = false;

$("#chkAllOk").text(idOk + ', ' + pw1Ok + ', ' + pw2Ok + ', ' + nameOk + ', ' + emailOk + '마지막 idOk:' + isOk );

$("#signupWarn").text( '중복된 ID입니다. 다른 ID를 입력해 주세요.' );

$("#btnConfirm").prop("disabled",true);

}

}, error: function( error ){

alert('error : ' + error);

}

});

}else{

//조건에 맞지 않는 경우

idOk = false;

$("#btnConfirm").prop("disabled",true);

$("#inputIdInSignup").removeClass("is-valid");

$("#inputIdInSignup").addClass("is-invalid");

}

});

//이름 길이 체크. 2자~20자까지

$("#inputName").keyup(function(){

var inputLen = $("#inputName").val().length;

var chkBlank = /\s/g;

var chkResult = chkBlank.test( $("#inputName").val() );

//길이에 맞지 않거나 공백이 포함되어 있는 경우

if((inputLen < 2 || inputLen > 20) || chkResult ){

nameOk = false;

$("#btnSignupInSignupModal").prop("disabled",true);

$("#inputName").removeClass("is-valid");

$("#inputName").addClass("is-invalid");

}else{

nameOk = true;

$("#signupWarn").text( '　' );

isOk = allOk( idOk, pw1Ok, pw2Ok, nameOk, emailOk );

if( isOk == true ){

$("#btnConfirm").prop("disabled",false);

}

$("#inputName").removeClass("is-invalid");

$("#inputName").addClass("is-valid");

}

});

//PW 길이 체크

$("#inputPw1InSignup").keyup(function(){

if( $("#inputPw1InSignup").val().length < 5 ){

pw1Ok = false;

$("#btnSignupInSignupModal").prop("disabled",true);

$("#inputPw1InSignup").removeClass("is-valid");

$("#inputPw1InSignup").addClass("is-invalid");

}else{

pw1Ok = true;

$("#signupWarn").text( '　' );

isOk = allOk( idOk, pw1Ok, pw2Ok, nameOk, emailOk );

if( isOk == true ){

$("#btnConfirm").prop("disabled",false);

}

$("#chkAllOk").text(idOk + ', ' + pw1Ok + ', ' + pw2Ok + ', ' + nameOk + ', ' + emailOk + '마지막 idOk:' + isOk );

$("#inputPw1InSignup").removeClass("is-invalid");

$("#inputPw1InSignup").addClass("is-valid");

}

});

//PW 확인 체크

$("#inputPw2InSignup").keyup(function(){

var pw1 = $("#inputPw1InSignup").val();

var pw2 = $("#inputPw2InSignup").val();

if( pw1 == pw2 ){

pw2Ok = true;

$("#signupWarn").text( '　' );

isOk = allOk( idOk, pw1Ok, pw2Ok, nameOk, emailOk );

if( isOk == true ){

$("#btnConfirm").prop("disabled",false);

}

$("#chkAllOk").text(idOk + ', ' + pw1Ok + ', ' + pw2Ok + ', ' + nameOk + ', ' + emailOk + '마지막 idOk:' + isOk );

$("#inputPw2InSignup").removeClass("is-invalid");

$("#inputPw2InSignup").addClass("is-valid");

}else{

pw2Ok = false;

$("#btnSignupInSignupModal").prop("disabled",true);

$("#inputPw2InSignup").removeClass("is-valid");

$("#inputPw2InSignup").addClass("is-invalid");

}

});

//E-mail 체크

$("#inputEmailInSignup").keyup(function(){

var inputTxt = $("#inputEmailInSignup").val();

var chkEmail = /^[a-zA-Z0-9]+@([a-zA-Z0-9]{1,10})\.([a-zA-Z]{1,10})+$/;

if( chkEmail.test(inputTxt) ){

emailOk = true;

$("#signupWarn").text( '　' );

isOk = allOk( idOk, pw1Ok, pw2Ok, nameOk, emailOk );

if( isOk == true ){

$("#btnConfirm").prop("disabled",false);

}

//$("#chkAllOk").text(idOk + ', ' + pw1Ok + ', ' + pw2Ok + ', ' + nameOk + ', ' + emailOk);

$("#inputEmailInSignup").removeClass("is-invalid");

$("#inputEmailInSignup").addClass("is-valid");

}else{

emailOk = false;

$("#btnSignupInSignupModal").prop("disabled",true);

$("#inputEmailInSignup").removeClass("is-valid");

$("#inputEmailInSignup").addClass("is-invalid");

}

});

//회원가입 버튼 클릭 이벤트

$("#btnConfirm").click(function(){

$("#frmRegistration").attr("action", ctx + "/regi/insert")

$("#frmRegistration").submit();

});

function allOk( ok1, ok2, ok3, ok4, ok5 ){

if( ok1 && ok2 && ok3 && ok4 && ok5 ){

return true;

}else{

return false;

}

Colored by Color Scripter

출처 : https://dotheright.tistory.com/225

저작자표시 비영리 변경금지

'개발 > javascript & jquery' 카테고리의 다른 글

[jQuery] 모바일에서 Datepicker 사용 시 키보드 올라오지 않게 하는 방법 (0)	2020.08.26
[javascript] 이메일 체크 정규식 예제 (0)	2020.08.23
[Vue.JS] Vuex Store의 state를 효율적으로 초기화하기 [펌] (0)	2020.08.21
[JQUERY] jquery 소스를 얻을만한 유용한 사이트[펌] (0)	2020.08.17
[vue.js] axios 사용시 폼 데이터 전송하기 (+파일 업로드) [펌] (0)	2020.08.12

'개발/javascript & jquery' Related Articles

Comments

개발자의 끄적끄적

[javascript]정규식 활용 회원가입 기능(아이디 중복확인, 요소 입력확인) [펌] 본문

[javascript]정규식 활용 회원가입 기능(아이디 중복확인, 요소 입력확인) [펌]

[javascript]정규식 활용 회원가입 기능(아이디 중복확인, 요소 입력확인) [펌]

1. 목표

2. 기능

3. 소스코드

'개발 > javascript & jquery' 카테고리의 다른 글

티스토리툴바