Form Taşıma ve Validation giriş Next.js

Form oluşturmak ve verileri gerçekleştirmek, validation web uygulaması geliştirmenin önemli parçalarıdır. validation Bu bölümde uygulamanızda formların nasıl oluşturulacağını ve verilerin nasıl yönetileceğini inceleyeceğiz Next.js. Ayrıca durum ve performans verilerini verimli bir şekilde yönetmek için ve form gibi popüler kitaplıkları da inceleyeceğiz. react-hook-form Formik form validation

Taşıma react-hook-form için Kullanma Form

react-hook-form Uygulamanızda form durum yönetimini ve veri yönetimini kolaylaştıran bir kütüphanedir. Aşağıda kayıt oluşturmak için nasıl kullanılacağına dair bir örnek verilmiştir: 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;  

Yukarıdaki örnekte durumu react-hook-form yönetmek ve verileri gerçekleştirmek için kullanıyoruz. Kullanıcı düğmeye tıkladığında gönderilir ve varsa hatalar görüntülenir. form validation form Register validation

Taşıma Formik için Kullanma Form

Formik form durumu, verileri validation yönetmek ve formla ilgili etkileşimleri yönetmek için güçlü bir kitaplıktır. Formik Uygulamanızda nasıl kullanılacağına dair bir örnek 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;  

Yukarıdaki örnekte durumu Formik yönetmek ve verileri gerçekleştirmek için kullanıyoruz. hatalar meydana gelirse mesaj olarak görüntülenir. form validation Validation

Çözüm

validation Bu bölüm size uygulamanızda formlar oluşturmayı ve verileri yönetmeyi tanıttı Next.js. Durumu ve performans verilerini verimli bir şekilde yönetmek için react-hook-form ve kitaplıklarını nasıl kullanacağınızı öğrendiniz. Bu, daha iyi bir kullanıcı deneyimi ve yanıt verme hızı sağlayan etkileşimli formlar oluşturmanıza yardımcı olacaktır. Formik form validation