Form 취급 Validation 및 Next.js

양식을 작성하고 데이터를 수행하는 validation 것은 웹 애플리케이션 개발의 필수적인 부분입니다. validation 이 섹션에서는 애플리케이션 에서 양식을 작성하고 데이터를 수행하는 방법을 살펴보겠습니다 Next.js. 또한 효율적으로 상태를 관리 하고 데이터를 수행하는 와 같은 널리 사용되는 form 라이브러리 도 살펴보겠습니다. react-hook-form Formik form validation

취급 react-hook-form 에 사용 Form

react-hook-form 애플리케이션 에서 form 상태 관리 및 데이터 수행을 단순화하는 라이브러리입니다. 다음은 등록을 구축하는 데 사용하는 방법의 예입니다. validation Next.js react-hook-form form

import { useForm } from 'react-hook-form';  
  
function RegistrationForm() {  
  const { register, handleSubmit, errors } = useForm();  
  
  const onSubmit =(data) => {  
    console.log(data);  
  };  
  
  return( 
    <form onSubmit={handleSubmit(onSubmit)}>  
      <input  
        type="text"  
        name="username"  
        placeholder="Username"  
        ref={register({ required: true, minLength: 5 })}  
      />  
      {errors.username && <p>Username is required and must be at least 5 characters long</p>}  
  
      <input  
        type="email"  
        name="email"  
        placeholder="Email"  
        ref={register({ required: true, pattern: /^\S+@\S+$/i })}  
      />  
      {errors.email && <p>Valid email is required</p>}  
  
      <button type="submit">Register</button>  
    </form>  
 );  
}  
  
export default RegistrationForm;  

위의 예에서는 상태를 react-hook-form 관리 form 하고 데이터를 수행하는 데 사용합니다 validation. form 사용자가 버튼을 클릭하면 이 제출되며 Register, validation 오류가 있는 경우 표시됩니다.

취급 Formik 에 사용 Form

Formik form 상태, 데이터를 관리 validation 하고 양식 관련 상호 작용을 처리하기 위한 강력한 라이브러리입니다. Formik 다음은 애플리케이션 에서 사용하는 방법의 예입니다 Next.js.

import { Formik, Form, Field, ErrorMessage } from 'formik';  
  
function ContactForm() {  
  const initialValues = {  
    name: '',  
    email: '',  
  };  
  
  const validate =(values) => {  
    const errors = {};  
  
    if(!values.name) {  
      errors.name = 'Name is required';  
    }  
  
    if(!values.email) {  
      errors.email = 'Email is required';  
    }  
  
    return errors;  
  };  
  
  const onSubmit =(values) => {  
    console.log(values);  
  };  
  
  return( 
    <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>  
      <Form>  
        <div>  
          <Field type="text" name="name" placeholder="Name" />  
          <ErrorMessage name="name" component="div" />  
        </div>  
        <div>  
          <Field type="email" name="email" placeholder="Email" />  
          <ErrorMessage name="email" component="div" />  
        </div>  
        <button type="submit">Submit</button>  
      </Form>  
    </Formik>  
 );  
}  
  
export default ContactForm;  

위의 예에서는 상태를 Formik 관리 form 하고 데이터를 수행하는 데 사용합니다 validation. Validation 오류가 발생하면 메시지로 표시됩니다.

결론

validation 이 섹션에서는 애플리케이션 에서 양식을 작성하고 데이터를 수행하는 방법을 소개했습니다 Next.js. react-hook-form 및 Formik 라이브러리를 사용하여 상태를 효율적으로 관리 form 하고 데이터를 수행하는 방법을 배웠습니다 validation. 이는 더 나은 사용자 경험과 응답성을 제공하는 대화형 양식을 만드는 데 도움이 됩니다.