表单验证是 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
-- -------------------- ---- -------
------ - ------- ----- ----- - ---- ---------
------ - ------ ------ - ---- -------------------
------ - -- --- ---- ------
----- ----------- - --------------------
--------- ------------
------- --------------
---------------------
--------- ------------
------- -------------
-------------------
--
----- --------- - -- -- -
------ -
-------
---------------- --------- --- --------- -- --
------------------------------
------------------ -- -
--------------------
--
-
--- ------- ------- -- -- -
------
------ ----------------
--- ----- -- -- -
------
----------
-------------
-----------------
-----------
----------------
---------------------------- -- -----------------
--------------------------
--
--
--------
------ ----------------
--- ----- -- -- -
------
----------
-------------
----------------
----------
---------------
----------------
---------------------------- -- -----------------
--------------------------
--
--
--------
------- ------ ------------------ --------------
--
---------
-------
--
---------
--
--
------ ------- ----------表单验证
表单验证可以使用 yup 这个库来执行。我们可以通过定义 Yup 的对象来指定表单验证规则。
在上面的代码示例中，我们定义了 LoginSchema 变量，用来验证表单中的数据。我们通过 Yup.object().shape() 方法定义对象中的字段及其验证规则。
接下来，在 Formik 组件中，我们将这个验证规则作为 validationSchema 属性的值。这样当表单数据被提交时，它将被自动验证，如果不符合规则则给出错误提示。
我们还定义了 isInvalid 和 errorBorderColor 属性，用来在表单验证失败时改变 UI 样式，给用户以实时反馈。
结论
以上就是如何使用 Next.js 在页面中实现表单验证的方法。表单验证是 Web 应用程序中不可缺少的一部分，这个方法可以帮助您在 Next.js 技术栈下更方便地实现表单数据的合法性验证，为用户提供更好的体验及数据安全保障。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67347b0e0bc820c582495ea4