如何在 Next.js 中验证前端用户提交的表单

在开发前端应用的过程中，表单的使用是非常常见的，而表单数据的验证则是保证信息的有效性、安全性和完整性的重要一环。在使用 Next.js 开发前端应用时，如何对用户提交的表单数据进行验证呢？

本文将详细介绍在 Next.js 中如何对用户提交的表单数据进行验证，主要内容包括表单验证的原理与步骤、表单验证的相关工具库的使用、表单验证示例代码以及相关注意事项。

一、表单验证的原理与步骤

表单验证的目的是检查用户输入的数据是否符合要求，以保证系统中数据的完整性与正确性。当用户提交表单时，需要进行以下步骤进行表单验证：

获取表单数据：通过表单元素的 id 或 name 属性获取表单元素的值。
数据验证：对获取到的数据进行校验，验证数据是否符合要求。
提示用户：如果数据格式不符合要求，需要给出提示，说明用户输入的数据有误；如果数据格式符合要求，则将数据提交给后台进行处理。

二、表单验证的相关工具库的使用

在 Next.js 中进行表单验证时，常常会使用到以下工具库：

Formik：一个功能强大的 React 表单处理库，支持复杂表单的校验。
Yup：一款轻量级的 JavaScript 内容验证库，可以用于快速、简便的内容验证。
React Hook Form：基于 React Hook 的表单验证库，具有轻量级的 API 和快速的渲染速度。

三、表单验证示例代码

在 Next.js 中使用表单验证库进行表单验证的示例代码如下所示：

Formik 的示例代码：

import { Formik, Form, Field, ErrorMessage } from 'formik'; // 引入 Formik 库

const SignupForm = () => (

Sign Up

<Formik initialValues={{ email: '', password: '' }} validate={values => { // 校验函数 const errors = {}; if (!values.email) { errors.email = 'Required'; } else if ( !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(values.email) ) { errors.email = 'Invalid email address'; } return errors; }} onSubmit={values => { // 提交函数 setTimeout(() => { alert(JSON.stringify(values, null, 2)); }, 500); }} > {({ isSubmitting }) => ( <form> <field> <errormessage> <field> <errormessage> <button> Submit </button> </form> )}

);

export default SignupForm;

Yup 的示例代码：

import * as Yup from 'yup'; // 引入 Yup 库

const schema = Yup.object().shape({ // 校验规则 email: Yup.string() .email('Invalid email') .required('Required'), password: Yup.string() .min(6, 'Too short') .max(12, 'Too long') .required('Required'), });

const SignupForm = () => { const formik = useFormik({ initialValues: { email: '', password: '', }, validationSchema: schema, // 校验规则 onSubmit: (values) => { alert(JSON.stringify(values, null, 2)); }, });

return (

<form> <label>Email Address</label> <input /> {formik.touched.email && formik.errors.email ? (

{formik.errors.email}

) : null} <label>Password</label> <input /> {formik.touched.password && formik.errors.password ? (

{formik.errors.password}

) : null}

  <button type="submit">Submit</button>
</form>

); };

export default SignupForm;

React Hook Form 的示例代码：

import { useForm } from 'react-hook-form'; // 引入 React Hook Form 库

const SignupForm = () => { const { register, handleSubmit, errors } = useForm(); // 初始化表单

const onSubmit = (data) => { alert(JSON.stringify(data)); };

return (

<form> <label>Email</label> <input id="email" name="email" type="email" ref={register({ required: true, pattern: /^\S+@\S+$/i })} /> {errors.email && This field is required}

-- -------------------- ---- -------
  ------ -----------------------------------
  ------
    -------------
    ---------------
    ---------------
    --------------- --------- ----- ---------- - ---
  --
  ---------------- -- ---------- ----- -- ----------------

  ------- -----------------------------
-------

); };

export default SignupForm;

四、相关注意事项

在进行表单验证时，需要注意以下几点：

在进行表单验证时，需要考虑用户输入信息的安全性，应该对其进行过滤和转码，防止 XSS 注入等攻击。
表单验证应该在后台服务器端也进行验证，前端验证只能起到一个提示作用，不能防止恶意攻击等问题。
在进行表单验证时，应该遵循可访问性原则，以便于更好地支持残障人士，如添加 ARIA 标签、提供有关错误的明确说明等。

总结

本文详细介绍了在 Next.js 中如何对用户提交的表单数据进行验证，主要内容包括表单验证的原理与步骤、表单验证的相关工具库的使用、表单验证示例代码以及相关注意事项。通过本文的学习，读者可以掌握在 Next.js 中进行表单验证的方法，并且能够独立完成相关的表单验证任务。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/654d795a7d4982a6eb6d8ab3