在前端开发中，表单验证是极其重要的一环。它能够有效地保证用户输入的安全和正确性，在提交表单数据前进行检查，将客户端的错误信息尽可能排除，使用户能够准确地输入信息，同时也能减少后端服务器的压力。而 Express.js 是一种非常流行的 Node.js Web 开发框架，开发者可以利用它来进行表单验证。本文将介绍如何使用 Express.js 进行表单验证的详细步骤，帮助大家更好地应用于实际项目中。
步骤一：安装 Express.js
安装 Express.js 的最简单方法就是使用 npm。打开终端或者命令行窗口，输入以下命令：
--- ------- ------- ------
这个命令将安装 Express.js 并将其添加到你的项目依赖中。
步骤二：使用 Express.js 进行表单验证
在 Express.js 框架中，支持多种表单数据的处理方式。使用 body-parser 依赖包能够使我们轻松地在 Express.js 应用中进行表单解析。我们还需要使用 express-validator 库的一些功能来创造验证器。
以下是一个简单的 Express.js 应用程序，它演示了如何使用 body-parser 和 express-validator 库实现表单验证功能：
----- ------- - -------------------
----- ---------- - -----------------------
----- - ------ ---------------- - - -----------------------------
----- --- - ----------
------------------------------- --------- ---- ----
--------------------- -
------------------------------------------------------ ----- ---- ----- --------
----------------------------------------------------- ----- ---- ---- --------
-------------------------------------------- ----- - ----- ----- -----------
---------------------------- ---- - ------------------------ ---- -- -- ----- - ---------- -------
-- ----- ---- -- -
----- ------ - ----------------------
-- ------------------- -
------ -------------------------------------
-
-- ------- ---- ----
---------------------- -------------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---该应用程序定义了一个 POST 请求处理程序，指定了 /register 路由，同时使用了 body-parser 解析表单数据。请求处理程序使用 express-validator 提供的多个验证器，检查用户提交的表单是否有效。如果出现任何验证错误，处理程序将返回一个 400 状态码，并发送包含验证错误的响应对象数组。
如果没有验证错误，则处理程序可以对表单数据进行进一步的处理。从您收到的用户数据中获取所需的信息并执行任何其他必要的操作。最后，处理程序返回 "Registration successful" 的消息作为响应。
步骤三：为表单添加视图
在使用 Express.js 应用程序中添加表单的视图时，请使用实际 HTML 和 CSS 代码。在本文中，我们使用了 Bootstrap 的表单 CSS 样式，如下所示：
--------- -----
------
------
-----------------------
----- ------------------------------------------------------------------------------- ---------------- --
-------
------
---- ------------------
---- ------------
---- --------------- -------------
-----------------
----- ------------- -------------------
---- -------------------
------ --------------------- ------------
------ ----------- -------------------- -------------- ---------------- ------------------ ---- ----- ----- --
------
---- -------------------
------ ------------------- ------------
------ ----------- -------------------- ------------- --------------- ------------------ ---- ---- ----- --
------
---- -------------------
------ ----------------- ---------------
------ ------------ -------------------- ---------- ------------ ---------------------------- ------------------ ------ --
------ -------------- ---------------- ----------------- ----- ----- ---- ----- ---- ------ -------------
------
---- -------------------
------ -------------------------------
------ --------------- -------------------- ------------- --------------- ---------------------- --
------
------- ------------- ---------- ----------------------------
-------
------
------
------
-------
-------该 HTML 代码创建了一个带有四个输入字段的表单，每个输入字段都对应 Express.js 应用程序中的一个验证器。当表单提交时，将通过其他代码来进行处理，并且如果有任何错误，则将在页面下部显示错误消息。
总结
本文介绍了如何使用 Express.js 进行表单验证的步骤。使用了 body-parser 库解析表单数据和 express-validator 库执行验证，应用程序还包含用于提交表单数据的 HTML 和 CSS 代码。这个过程应该对初学者是容易理解的，帮助开发者在实际应用项目中有效地处理表单数据，避免了将不安全的数据传送给后端服务器。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647161d3968c7c53b0f417f7