[React] 회원가입 폼 UI 만들기 (2) / 정규표현식 이해하기!

이전 글에 이어서 회원가입 UI 를 완성시켜보자!!!

 

[React] 회원가입 폼 UI 만들기 (1)

 

 

4. 비밀번호 정규표현식 만들기

 

** 정규표현식이란??

문자열의 패턴을 표현하는 데 사용되는 형식이다. 

이를 사용하면 특정한 문자 조합을 찾거나 문자열을 검색하거나, 대체하거나, 추출하는 등의 다양한 작업을 할 수 있다.

정규표현식은 / 기호로 감싸고 있는 패턴으로 표현이 된다. 패턴은 문자열의 일치 여부를 확인하고자 하는 조건을 나타내는데 예를 들어 이메일 주소형식, 전화번호 형식, 비밀번호 유효성 등을 확인하는 데 사용할 수 있다. 

 

 const isValidPassword = (password) => {
    const passwordPattern = /^(?=.*[a-zA-Z])(?=.*\d|(?=.*\W)).{8,15}$/;
    return passwordPattern.test(password);
  };
  
  ///....코드 생략
  
  if (!isValidPassword(password)) {
  	alert('비밀번호는 영어 대소문자, 숫자, 특수문자 중 2종류 조합의 8-15자여야 합니다.');

 

>>

비밀번호가 주어진 조건을 충족하는지 확인하는 함수 isValidPassword를 만들고

passwordPattern이라는 정규표현식을 만든다. 

이 정규표현식과 password가 같은지를 test  한다!

 

그리고 이 정규표현식에 password가 맞지 않으면 경고 메시지를 반환한다. 

 

5. 전화번호 정규표현식 만들기

5-1. 문제점

 

 

>>

그냥 type=number 로 해두었더니 휴대폰 번호 형식이 아닌 그냥 숫자만 입력해도 휴대폰 번호로 인식하여

저장이 되었다. 

그래서 앞서 사용했던 정규표현식을 사용하여 정상적인 휴대폰 번호가 입력이 되도록 한다. 

 

 

 

 

 

  const isValidPhoneNumber = (phoneNumber) => {
    const phoneNumberPattern = /^\d{9,12}$/;
    return phoneNumberPattern.test(phoneNumber);
  };
  
  ///...코드 생략
  
  else if(!isValidPhoneNumber(phonenumber)){
      alert('휴대폰 번호를 제대로 입력해주세요');

 

 

잘 저장된 걸 확인할 수 있다!

 

최종 코드

 

>> App.js
import React, { useState, useRef } from 'react';
import './App.css'



const SignUpForm = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [phonenumber, setPhoneNumber] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const passwordInputRef = useRef(null);

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleConfirmPasswordChange = (e) => {
    setConfirmPassword(e.target.value);
  };

  const isValidPassword = (password) => {
    const passwordPattern = /^(?=.*[a-zA-Z])(?=.*\d|(?=.*\W)).{8,15}$/;
    return passwordPattern.test(password);
  };

  const isValidPhoneNumber = (phoneNumber) => {
    const phoneNumberPattern = /^\d{9,12}$/;
    return phoneNumberPattern.test(phoneNumber);
  };
  

  const handleSubmit = (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      alert('비밀번호가 일치하지 않습니다.');
      passwordInputRef.current.focus();
    } else if (!isValidPassword(password)) {
      alert('비밀번호는 영어 대소문자, 숫자, 특수문자 중 2종류 조합의 8-15자여야 합니다.');
      passwordInputRef.current.focus();
    } else if(!isValidPhoneNumber(phonenumber)){
      alert('휴대폰 번호를 제대로 입력해주세요');
    } else {

      console.log('폼 제출 완료!:');
      console.log('이름:', username);
      console.log('이메일:', email);
      console.log('비밀번호:', password);
      console.log('휴대폰 번호:', phonenumber)
    }
  };


    return (
      <div className='signup-form'>
        <h2>회원가입</h2>
        <hr></hr>
        <div className='form_id'>
          <h3>계정 정보</h3>
          <form onSubmit={handleSubmit}>
            <div className='form_email'>
              <h5>이메일</h5>
              <input
                type="email"
                placeholder='업무용 이메일을 입력해 주세요'
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div className='form_pw'>
              <h5>비밀번호</h5>
              <input
                type="password"
                placeholder='영어 대소문자, 숫자, 특수문자 중 2종료 조합의 8-15자'
                value={password}
                name='register_pw'
                ref={passwordInputRef}
                onChange={handlePasswordChange}
              />
            </div>
            <div className='form_pw'>
              <h5>비밀번호 확인</h5>
              <input
                type="password"
                placeholder='비밀번호를 다시 입력해 주세요'
                value={confirmPassword}
                maxLength='20'
                name='register_pwcheck'
                onChange={handleConfirmPasswordChange}
              />
            </div>
            <div className='form_name'>
              <h5>이름</h5>
              <input
                type="text"
                placeholder='이름을 입력해 주세요.'
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
            </div>
            <h5>휴대폰번호</h5>
            <div className='form_call'>
              <input
                type="number"
                value={phonenumber}
                placeholder='하이픈(-)을 제외한 숫자만 입력해주세요'
                onChange={(e) => setPhoneNumber(e.target.value)}
              />
              <button type='submit'>인증 요청</button>
            </div>
            <div className='form_button'>
              <button type="submit">가입하기</button>
            </div>
          </form>
        </div>
      </div>
    );
  };

  export default SignUpForm;

 

 

>> App.css

h2 {
  text-align:center;
  font-weight:900;
  font-size: 30px;
}

hr {
  width:40%;
}

h5 {
  margin-bottom:4px;
  color:rgb(126, 124, 124);
}

.form_id {
  display:flex;
  flex-direction:column;
  font-size:20px;
  width:15%;
  margin-left:30%;

}

 input {
  width:600px;
  padding:20px;
  border:2px solid rgba(191, 185, 193, 0.8);
  border-radius:10px;
}

.form_call {
  display:flex;
  flex-direction: row;
  width:650px;

}

.form_call > button {
  width:30%;
  border-radius:10px;
  border:2px solid;
  background-color:rgba(0,0,255);
  color:white;
  margin-left:10px;
  font-size:19px;

}

.form_button > button {
  width: 650px;
  margin-top:10px;
  background-color:rgba(0,0,255,0.8);
  color:white;
  padding:10px;
  border-radius:10px;
}


@media (max-width: 768px) {
  .signup-form {
    width: 90%;
    margin: 0 auto; 
    
  }
}