REACT_HOOKS useInput 예제 (간단한 회원가입폼 만들기)- 유효성검사
이제 유효성 검사 해야함 ㅎㅎㅎㅎ
useInput 코드
const useInput = (initialValues) => { const [values, setValues] = useState(initialValues); const onChange = (event) => { const { name, value } = event.target; setValues({ ...values, [name]: value }); }; const onReset = () => setValues(initialValues); return [values, onChange, onReset]; };
1. 빈값 체크하기
✔ 한꺼번에 체크하기.
- Object.values(obj)
- Array.inclues(찾고싶은 값 ) 사용하기
Object.values()
- Object.values(obj)
- Array.inclues(찾고싶은 값 ) 사용하기
Object.values() 메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴한다.
const object1 = {
a: '에이',
b: "비",
c: "씨"
};
console.log(Object.values(object1));
//Array ["에이", "비", "씨"]
Array.prototype.includes()
includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별한다.
return 값은 Boolean
const pets = ['cat', 'dog', 'bat'];
console.log(pets.inclues('cat')) // true
OnValidator 함수 만들기
const onValidator = (data) => {
const values = Object.values(data);
const validatorEmpty = values.includes("");
validatorEmpty ? alert("빈칸을 모두 입력하세요") : onReset();
};
const handleSubmit = (event) => {
event.preventDefault();
onUpdate(data);
onValidator(data);
};
{...생략}
<button onClick=(handleSubmit)></button>
✔ 하나씩 체크하기(feat.노가다)
const onValidator = (data) => {
const { userId, age, gender, phone, email, address } = data;
if (userId === "") alert("이름을 입력해주세요");
if (age === "") alert("나이를 입력해주세요");
if (gender === "") alert("성별을 입력해주세요");
if (phone === "") alert("핸드폰번호를 입력해주세요");
if (email === "") alert("이메일을 입력해주세요");
if (address === "") alert("주소를 입력해주세요");
return onReset();
};
const handleSubmit = (event) => {
event.preventDefault();
onUpdate(data);
onValidator(data);
};
오류남...
이렇게 하나씩 계속 타고나가서 엉망이 됨^^
해결책으로 찾은 useForm
다음편에 사용해보기!
Author And Source
이 문제에 관하여(REACT_HOOKS useInput 예제 (간단한 회원가입폼 만들기)- 유효성검사), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@holicholicpop/REACTHOOKS-useInput-예제-간단한-회원가입폼-만들기-유효성검사저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)