[jQuery] 로그인폼 구현하기2 / 이메일, 비밀번호 정규식 검증

[조건]

1. 이메일 형식을 정규식으로 검사합니다.

2. 이메일과 비밀번호가 입력되지 않았다면 "아이디를 입력해주세요" 또는 "비밀번호를 입력해주세요" 안내문구가 나오며, 로그인이 되지 않습니다.

3. 이메일 형식이 맞지 않다면 "이메일형식에 맞게 입력해주세요" 안내문구가 나오고, 로그인이 되지 않습니다.

4. 비밀번호는 대문자가 포함되어야 합니다.

5. 대문자가 포함되지 않았다면 "대문자가 포함 되어야 합니다" 안내문구가 나오고, 로그인이 되지 않습니다.

 

[html]

<button class="formOpenBtn">로그인</button>
<form action="login.php" id="loginForm"> 
	<p> 
	     <span class="loginTitle">아이디</span> 
	     <input type="email" placeholder="아이디를 입력하세요" id="inputId"> 
	     <span class="required idrequired hide">아이디를입력하세요</span>
	     <span class="required wrongid hide"> 이메일형식에 맞게 입력해주세요.</span>
	 </p>
	 <p>
	     <span class="loginTitle">비밀번호</span> 
	     <input type="password" placeholder="비밀번호를 입력하세요" id="inputPW"> 
	     <span class="required pwrequired hide">비밀번호를입력하세요</span> 
	     <span class="required wrongpw hide">대문자가 포함 되어야 합니다.</span> 
	 </p> 
	<button class="loginBtn">로그인</button> 
    <button class="cancle">취소</button> 
</form>

[css] 

- 로그인 폼 구현하기 과 동일

[참고]

2021.08.26 - [프론트엔드/javaScript, jQuery] - [jQuery] 로그인 Form 구현하기

[jQuery] 로그인 Form 구현하기

[jQuery]

-  정규식 의미 알기

/[A-z]/.test('') : 대문자 A부터  소문자z까지 
/\s/.test() : \s 는 특수문자 포함 모든 문자를 의미하며 \s 특수문자 포함 모든 문자 1개
/\S+@\S+\.\S+/.test()  : \s+ 뒤에도 문자를 계속 찾습니다.

1. 이메일 정규식은 구글 검색합니다.

2.변수에 입력한 이메일 input과 정규식을 각각 저장합니다.

3. 아이디 공백체크를 합니다.

[참고]

2021.08.26 - [프론트엔드/javaScript, jQuery] - [jQuery] 로그인 Form 구현하기

4. 만약에 이메일 입력칸이 이메일의 정규식 변수와 맞지 않다면 "이메일형식에 맞게 입력해주세요" 안내문구가 나오고, 로그인이 되지 않게 해줍니다.

5. 만약에 모든 대문자라는 정규식과 입력한 패스워드 변수가 맞지 않다면 "대문자가 포함 되어야 합니다"라는 안내문구가 나오며 로그인이 되지 않습니다.

 

 

$("#loginForm").hide(); 
 
$(".formOpenBtn").on("click",function() {
	$("#loginForm").show(); 
});

$("#loginForm").on("submit",function(e){

	var emailVal = $("#inputId").val();
	var reg = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
			
	if(emailVal==""){
		$('.idrequired').removeClass('hide'); 
		e.preventDefault();
	}else if (reg.test(emailVal) == false){
		$('.wrongid').removeClass('hide'); 
		e.preventDefault();
	};

	var pwVal = $('#inputPW').val();

	if (pwVal == "" ){
		$('.pwrequired').removeClass('hide');
		e.preventDefault();
	} else if ( /[A-Z]+/.test(pwVal) == false ){
		$('.wrongpw').removeClass('hide'); 
  		e.preventDefault();
	};

	 $("#inputId,#inputPW").on("input",function(){ 
	    $('.idrequired,.pwrequired').addClass('hide');
	});

});