close

Form 处理和 Validation 进入 Next.js

构建表单和执行数据 validation 是 Web 应用程序开发的重要组成部分。 在本节中，我们将探讨如何 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。 这将帮助您创建交互式表单，提供更好的用户体验和响应能力。