form input 유효성 검사
결과
내용
- name 조건: 값의 길이가 1이거나, 4보다 많거나, 값이 없을때
- phone number 조건: 값의 길이가 13보다 작거나
- content 조건: 값의 길이가 3보다 작거나, type이 string일때
조건부 렌더링을 통해 에러 메세지를 보여줌 - 값이 모두 만족하면 '전송되었습니다.' 라는 알림창이 뜨고 입력된 값이 콘솔로 찍힘
코드
//사용자가 입력 필드에 입력한 데이터를 보유
const [values, setValues] = {
nameValue: '',
numberValue: '',
contentValue: '',
};;
//각 입력 필드에 대한 오류를 보유
const [inputStatus, setInputStatus] = useState({});
//양식이 제출중인지 여부를 추적함(양식에 오류가 없는 경우에만 해당됨)
const [errCheck, setErrCheck] = useState(false);
//입력이 values상태와 동기화 된 상태로 유지되고,
//사용자가 입력 할 때 상태가 업데이트된다.
const handleChange = e => {
const { value, name } = e.target;
setValues({
...values,
[name]: value,
});
};
//양식이 제출 될 때마다 inputStatus 상태 변수는 setInputStatus(err(values)) 메소드를 사용하여 오류를 나타낸다.
const handleSubmit = e => {
e.preventDefault();
setInputStatus(err(values));
setErrCheck(true);
};
//values 객체를 이 함수에 대한 인수로 전달한 다음 유효성검사 테스트를 하면서 오류가 채워지고 반환된다.
const err = values => {
let errors = {};
//name input
if (
values.nameValue.length === 1 ||
values.nameValue.length > 4 ||
!values.nameValue
) {
// 조건에 맞으면 에러 메세지를 반환
errors.nameValue = '이름을 확인해주세요.';
}
//number input
if (values.numberValue.length < 13) {
errors.numberValue = '휴대번호를 확인해주세요.';
}
//content input
if (values.contentValue.length < 3 || !typeof contentValue === 'string') {
errors.contentValue = '내용을 확인해주세요.';
}
//에러 반환
return errors;
};
//inputStatus길이가 0 이거나 errCheck가 true 상태일 때
//submitForm을 누르면 inputStatus가 마운트 되도록
//inputStatus 객체가 비어 있는지, errCheck가 참인지 확인한다.
//이 검사가 참이면 submitForm이 호출된다.
//단일 종속성, 즉 inputStatus객체도 있는데 inputStatus객체가 변경 될 때만 실행한다.
useEffect(() => {
if (Object.keys(inputStatus).length === 0 && errCheck) {
submitForm();
}
}, [inputStatus]);
//폼 데이터의 제출을 처리한다
const submitForm = () => {
console.log(values);
//조건문을 사용하지 않으면 alert가 두번 나타남
if (Object.keys(inputStatus).length === 0 && errCheck) {
alert('전송되었습니다.');
setValues({
nameValue: '',
numberValue: '',
contentValue: '',
});
}
};
return(
{/* 버튼을 누르면 이 폼에 데이터들이 제출되도록 */}
<ContentWrap onSubmit={handleSubmit}>
<ContentBox>
<div>Name</div>
<ContentInput
name="nameValue"
defaultValue={values.nameValue}
onChange={handleChange}
/>
{/* 에러시 */}
{inputStatus.nameValue && <ErrMes>{inputStatus.nameValue} </ErrMes>}
</ContentBox>
<ContentBox>
<div>Phone Number</div>
<ContentInput
name="numberValue"
defaultValue={values.numberValue}
onChange={handleChange}
/>
{inputStatus.numberValue && (
<ErrMes>{inputStatus.numberValue}</ErrMes>
)}
</ContentBox>
<ContentBox>
<div>Content</div>
<ContentInput
name="contentValue"
defaultValue={values.contentValue}
onChange={handleChange}
/>
{inputStatus.contentValue && (
<ErrMes>{inputStatus.contentValue}</ErrMes>
)}
</ContentBox>
<Submit type="submit" onKeyUp={handleSubmit} errCheck={errCheck}>
Send
</Submit>
</ContentWrap>
);
Author And Source
이 문제에 관하여(form input 유효성 검사), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@suminllll/form-input-유효성-검사저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)