-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
회원가입 유효성 부분 페이지 안뜨는 이유 좀요....
23.11.16 18:12 작성 조회수 158
0
import React ,{useRef}from 'react'
import { Link } from 'react-router-dom'
import {useForm} from 'react-hook-form'
function RegisterPage() {
const {register,watch,errors} = useForm()
const password = useRef();
console.log(watch("email"))
return (
<div className='auth-wrapper'>
<div style={{textAlign:'center'}}>
<h3>Register</h3>
</div>
<form>
<label>Email</label>
<input
name="email"
type='email'
// ref={register({ required: true, pattern: /^[0-9a-zA-Z]([-_._]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_._]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i })}
/>
{/* {errors.email && <p>This field is required</p>} */}
<label>Name</label>
<input
name="name"
// ref={register({ required: true, maxLength: 10 })}
/>
{/* {errors.name && errors.name.type ==="requirerd"
&& <p>This field is required</p>}
{errors.name && errors.name.type ==="maxLength"
&& <p>This input exceed maximum length</p>} */}
<label>Password</label>
<input
name="password" type='password'
// ref={register({required: true, minLength:6})}
/>
{/* {errors.password &&errors.password && errors.password.type ==="required"
&& <p>This name field is required</p>}
{errors.password &&errors.password && errors.password.type ==="minLength"
&& <p>비밀번호 자리가 6자리 이상이어야 합니다.</p>} */}
<label>Password Confirm</label>
<input
name="Password Confirm"
type='password'
// ref={register({
// required:true,
// validate:(value)=>
// value === password.current
// })}
/>
{/* {errors.password_confirm && errors.password_confirm.type ==="required"
&& <p>This password confirm field is required</p>}
{errors.password_confirm && errors.password_confirm.type ==="validate"
&& <p>This passwords do not match</p>} */}
<input type="submit" />
<Link style={{color:'gray',textDecoration:'none'}}to="/login" >이미 아이디가 있다면</Link>
</form>
</div>
)
}
export default RegisterPage
이렇게 저 부분을 주석처리하면 회원가입 페이지가 나오는데 주석처리를 해제하면 회원가입 페이지가 안떠요...
따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
react-hook-form을 이용한 회원 가입 유효성 체크
강의실 바로가기
답변을 작성해보세요.
0
답변 1