⚡ 들어가기

회원가입 기능을 구현하는데, react-material-ui-form-validator라는 라이브러리를 활용하게 되었다.
ValidatorForm 태그로 감싸고, 그 안에 TextValiator 태그를 사용해서 각 태그에 설정한 validator를 통해서 유효성 검사가 입력과 동시에 진행된다.
기본적으로 제공해주는 validator는 required, isEmail 등이 있다.
더 자세한 사용법은 Git hub link에서 확인하면 된다.

🔥 구현

공식 문서에는 클래스형 컴포넌트를 사용해서 컴포넌트가 mount, unmount 생명주기를 활용해서 새로운 rule(=validator)를 추가했는데, 나는 함수형 컴포넌트를 사용해서 useEffect를 활용해서 커스텀 rule을 추가했다.

📌 form 코드

<ValidatorForm onSubmit={handleFormSubmit}>
    <TextValidator
        sx={{ mb: 3, width: '100%' }}
        variant="outlined"
        size="small"
        label="Username"
        onChange={handleChange}
        type="text"
        name="username"
        value={username || ''}
        validators={['required']}
        errorMessages={['this field is required']}
    />
    <TextValidator
        sx={{ mb: 3, width: '100%' }}
        variant="outlined"
        size="small"
        label="Email"
        onChange={handleChange}
        type="email"
        name="email"
        value={email || ''}
        validators={['required', 'isEmail']}
        errorMessages={[
            'this field is required',
            'email is not valid',
        ]}
    />
    <TextValidator
        sx={{ mb: '16px', width: '100%' }}
        label="Password"
        variant="outlined"
        size="small"
        onChange={handleChange}
        name="password"
        type="password"
        value={password || ''}
        validators={['required', 'isPassword']}
        errorMessages={[
            'this field is required',
            'password format error',
        ]}
    />
    <TextValidator
        sx={{ mb: '16px', width: '100%' }}
        label="Confirm password"
        variant="outlined"
        size="small"
        onChange={handleChange}
        name="repeatPassword"
        type="password"
        value={repeatPassword || ''}
        validators={['isPasswordMatch']}
        errorMessages={['password mismatch']}
    />
          
    ...
        
</ValidatorForm>

📌 custom validator

패스워드 형식도 validator 라이브러리 자체에서 검사해주는 것이 있지만,
내가 원하는 정규식으로 설정하기 위해서 'isPassword'라는 rule을 추가했다.
'isPasswordMatch'라는 rule은 confirm password 값이 password 값과 동일한지 확인하는 rule이다.

useEffect(() => {
    ValidatorForm.addValidationRule('isPasswordMatch', (value) => {
        if (value !== password) {
            return false
        }
        return true
    })
}, [repeatPassword])

useEffect(() => {
    ValidatorForm.addValidationRule('isPassword', (value) => {
        let check = /^[A-Za-z0-9]{8,20}$/ // 8~20자 대소문자 상관없이 알파벳 + 숫자
        if (check.test(value)) {
            return true
        }
        return false
    })
}, [password])

💧 최종 화면

각 입력칸에 설정된 validator에 따라서 입력과 동시에 유효성 검사를 실행해 에러 메시지를 출력한다.