0224 : 회원가입 검증

✔ 마켓컬리 회원가입 검증

마켓컬리의 경우 사용자가 입력하는 값이 사이트 회원가입 조건에 맞는지를 바로바로 색상으로 표현해 줌

입력값 조건 만족 여부 색상 표현 목표
1. 정규표현식으로 조건 설정
2. 함수로 입력값의 조건 만족 여부 true/false 반환
3. 삼항연산자 이용 함수 반환값에 따른 html 클래스명 부여
4. true값 반환에 해당하는 클래스명 선택해 CSS 주기

✔ 정규표현식 함수 작성

1. 회원가입에서 자주 쓰는 정규 표현식을 통해 정규표현식 작성
2. 아이디, 이메일, 비밀번호 검증 함수를 한 파일 안에 각각 작성해 export 가능하게!

export function IsEmail(value) {
  var regExp = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/;
  return regExp.test(value) ? true : false;
}

export function IsId(value) {
  let regExp = /[A-Za-z0-9]\w{4,}/;
  return regExp.test(value) ? true : false; //조건 충족 시 true 반환
}

export function IsPassword(value) {
  var regExp =
    /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{10,}$/;
  console.log(regExp.test(value));
  return regExp.test(value) ? true : false; //형식에 맞는 경우 true 리턴
}

3. 해당 칸 입력값 조건 만족 여부에 따른 검증 시각화

회원가입 페이지에 들어온 기본 상태

   <div className="signup_Pw_block">
            <input
              className="signup_Pw_input"
              name="Pwd"
              placeholder="비밀번호를 입력해주세요"
              maxLength="16"
              type="text"
              onChange={onChange}
              value={Pwd}
              onClick={onClick_Info}
            />
            

input을 클릭해 입력하려고 onClick={onClick_Info}으로 인해 해당 함수 실행됨

 const onClick_Info = (e) => {
    console.log(e.target);
    let name = `show${e.target.name}Info`;
    setInputs({
      ...inputs,
      [name]: true,
    });
  };

함수가 실행되면서 해당 input입력 조건 보여줘야 하는 상태가 true가 됨

showPwdInfo가 true 되면서 삼항연산자 원리로 하위 jsx가 모두 랜더링됨

        {showPwdInfo ? (
              <div className="signup_Id_info">
                <li className={Pwd.length >= 10 ? "true" : "false"}>
                  10자 이상 입력
                </li>
                <li className={IsPassword(Pwd) ? "true" : "false"}>
                  영문/숫자/특수문자(공백 제외)만 허용하며, 3가지 조합
                </li>
              </div>
            ) : null}

클릭해서 조건 보이는 거까지는 완성!!
인제 입력값에 따라 바로바로 조건 만족 여부가 색상으로 표현 되어야한다!!
색상은 클래스명에 따라 CSS를 입히면 되고, 이전에 작성한 정규표현식 조건만족여부 함수 반환값에 따라 class명을 부여하도록 <li className={IsPassword(Pwd) ? "true" : "false"}> 이렇게 작성했다.

콘솔창을 보니 조건에 만족하게 입력하면 클래스명이 true로 부여되고 아래처럼 일부만 만족하게 입력하면

만족한 것은 클래스명이 true로 불만족한 것은 false로 부여된 것이 확인되었다.

클래스명이 검증함수가 반환하는 값에 따라 삼항연산자로 올바르게 부여되는 것까지 완료했으니 인제 해당 클래스명에 따라 색상만 부여하면 끝!!

    [class*="info"] {
      padding-bottom: 10px;
      font-weight: $weight-regular;
      letter-spacing: 0;
      line-height: 18px;
      font-size: $font-small;
      color: $txt-medium-gray;
      .true {
        color: green;
      }
      .false {
        color: red;
      }
    }

아이디, 비밀번호, 비밀번호확인 등 조건이 보여지는 div는 클래스명이 info를 포함하게 부여했기 때문에 CSS 선택자를 [class*="info"] 이렇게 표현했다. 또 SCSS이기 때문에 nest된 구조로 작성가능해 해당 div 내 클래스명이 true / false 인 것은 저렇게 안으로 쏙!! 넣어주면 끝!

어려울줄 알았는데 클래스명을 ⭐함수 반환 값을 이용한 삼항연산자 이용⭐하며 간단하게 완료했다!!!