[js] if문과 유효성검사__정규표현식을 사용하여 회원가입 구현

회원가입 구현 부분도 로그인과 같이 업데이트할 예정입니다.

 

---

# HTML

 

 

이렇게 form과 input를 만들었습니다.(* 참고로 서버에 전송하지 않고 js 파일에서 불러와 비교하고 브라우저에 실행하는 방식이기에.. method, action를 사용하지 않았습니다.)

 

정말로 이 password로 할 것인지 한번 더 입력을 받았습니다. 그럼으로써 오타 같은 실수를 방지시켜줄 수 있습니다. (제가 password 한 칸이 더 있고 없고의 차이를 느꼈었기에 압니다..)

 

---

# JS

 

 

그리고 필요한 태그들을 JS 파일에 불러옵니다.

 

const signUpForm = document.querySelector(".signUp-form");
const upName = document.getElementById("signUp-userName");
const upEmail = document.getElementById("signUp-userEmail");
const upPwd = document.getElementById("signUp-userPassword");
const upOneMorePwd = document.getElementById("signUp-userPassword-oneMore");

 

그리고 사용자에게 받은 값들을 처리할 함수를 만들었습니다. evn.preventDefault()을 사용함으로서 form의 기본 동작인 새로고침을 막았습니다.

 

function valueEvent(evn){
    evn.preventDefault();

    const name = upName.value;
    const email = upEmail.value;
    const pwd = upPwd.value;
    const oneMorePwd = upOneMorePwd.value;


    let reg_name = /^[가-힣]+$/; // 한글만 가능하다.
    let reg_email =/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/; // 길이도 검증한다.
    let reg_pw = /(?=.*\d)(?=.*[a-zA-ZS]).{8,}/; // 문자, 숫자 1개이상 포함, 8자리 이상이어야 가능하다.
    
    if(reg_name.test(name) !== true){
        alert("한글으로만 입력가능합니다.");
        return false;
    }
	if(reg_email.test(email) !== true){
    	alert("이메일 확인 부탁드립니다.");
        return false;
    }
    if(reg_pw.test(pwd) !== true){
        alert("문자, 숫자 1개 이상이여야하며 최소 8자리이상 입력해주셔야합니다.");  
        return false;
    }
    if(reg_pw.test(oneMorePwd) !== true){
        alert("문자, 숫자 1개 이상이여야하며 최소 8자리이상 입력해주셔야합니다.");    
        return false;
    } 
    if(pwd !== oneMorePwd){
        alert("비밀번호가 일치하지 않습니다.");
        return false;
    }

	alert('${name}님 회원가입을 축하드립니다.`);
}

 

if 조건문에 적합하는 경우 해당 코드를 실행하고 false를 반환합니다.

 

.test() 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환하도록 했습니다.

 

!== 연산자는 같지 않을 경우입니다. 만일 .test() 메서드의 반환 값이 false이면 true와 같지 않는데, 그럴 경우 if문의 조건에 적합합니다. (ex) .test의 값이 true가 아닐 경우 실행합니다.)

 

if문 조건에 적합하지 않으면 맨 마지막 if문에 포함되지 않는 alert가 실행됩니다.

 

이제 마지막으로 이벤트 리스너로 해당 함수가 실행하게 했습니다.

 

signUpForm.addEventListener("submit", valueEvent);

 

끝!

 

* 참고 사이트 & 블로그 *

 

MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

RegExp.prototype.test() - JavaScript | MDN

 

[Javascript] 자주 사용하는 정규표현식과 사이트 _ minthing님.

 

https://mber.tistory.com/18

 

- 저도 위 minthing님처럼 필요할 때 찾아 보려고 게시글에 첨부합니다. -

 

정규식 표현을 소개합니다.

https://www.nextree.co.kr/p4327/

정규표현식(Regular Expression)을 소개합니다.

정규식 표현식과 관련 실습 제공.

https://www.w3schools.com/jsref/jsref_obj_regexp.asp

JavaScript RegExp Reference