如何使用 Next.js 在页面中实现表单验证

表单验证是 Web 开发中不可避免的一环，为了保障用户提交的数据的合法性，不正确的数据应该被拒绝。

Next.js 是一个 React 框架，它使用类似于服务器端渲染(SSR)的方式来进行静态优化，使页面加载速度更快。这篇文章介绍如何在 Next.js 中实现表单验证，来保障页面数据的合法性。

安装依赖

首先，我们需要安装 yup 库，它可以帮助我们进行表单验证，执行以下命令：

npm install yup

编写表单

我们以一个基础的登录表单为例。我们需要的是用户输入的用户名和密码，同时需要验证用户名和密码是否正确，以此判断用户是否可以登录。

在编辑表单之前，我们需要先安装 Formik 和 Chakra UI，它们可以帮助我们创建表单并为其添加UI组件。执行以下命令：

npm install formik chakra-ui-react @emotion/react @emotion/styled

// javascriptcn.com code example
import { Formik, Form, Field } from "formik";
import { Input, Button } from "@chakra-ui/react";
import * as Yup from "yup";

const LoginSchema = Yup.object().shape({
    username: Yup.string()
        .min(4, "用户名必须至少4个字符")
        .required("用户名是必填项"),
    password: Yup.string()
        .min(8, "密码必须至少8个字符")
        .required("密码是必填项")
})

const LoginForm = () => {
  return (
    <Formik
      initialValues={{ username: "", password: "" }}
      validationSchema={LoginSchema}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="username">
            {({ field }) => (
              <Input
                {...field}
                id="username"
                placeholder="用户名"
                label="用户名"
                variant="filled"
                isInvalid={!!errors.username && touched.username}
                errorBorderColor="red.300"
              />
            )}
          </Field>
          <Field name="password">
            {({ field }) => (
              <Input
                {...field}
                id="password"
                placeholder="密码"
                label="密码"
                type="password"
                variant="filled"
                isInvalid={!!errors.password && touched.password}
                errorBorderColor="red.300"
              />
            )}
          </Field>
          <Button mt={4} colorScheme="teal" type="submit">
            登录
          </Button>
        </Form>
      )}
    </Formik>
  );
};

export default LoginForm;

表单验证

表单验证可以使用 yup 这个库来执行。我们可以通过定义 Yup 的对象来指定表单验证规则。

在上面的代码示例中，我们定义了 LoginSchema 变量，用来验证表单中的数据。我们通过 Yup.object().shape() 方法定义对象中的字段及其验证规则。

接下来，在 Formik 组件中，我们将这个验证规则作为 validationSchema 属性的值。这样当表单数据被提交时，它将被自动验证，如果不符合规则则给出错误提示。

我们还定义了 isInvalid 和 errorBorderColor 属性，用来在表单验证失败时改变 UI 样式，给用户以实时反馈。

结论

以上就是如何使用 Next.js 在页面中实现表单验证的方法。表单验证是 Web 应用程序中不可缺少的一部分，这个方法可以帮助您在 Next.js 技术栈下更方便地实现表单数据的合法性验证，为用户提供更好的体验及数据安全保障。

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