在前端开发中，表单的验证是非常重要的一环。而 server-validated-form 包就是一个能够帮助我们在前端客户端校验失败时，自动向后端服务器发出请求，进行服务器端的表单验证的 npm 包。下面将详细介绍如何安装和使用该工具包。
安装
安装 server-validated-form 只需要使用 npm：
npm install server-validated-form
使用
- 导入 server-validated-form
import { ServerValidatedForm } from 'server-validated-form';- 创建表单，包装成 ServerValidatedForm
-- -------------------- ---- -------
--- ---- - ----------------------
--- --- - --- ------------------------- -
---- ----------------
----------- -
----------- ---------- ------- ------------
--
--------------- -
----------- ---------- ------- ----- ------------
--------------------
-
---- 组织表单数据并提交
let data = svf.serialize(); svf.submit(data);
submit 方法将在表单提价请求发送到服务器前，验证表单并将表单数据一同发送。
指南
ServerValidatedForm 的一个关键特性是在前端无法完全验证表单时，将表单提交到服务器以获取验证结果。这个特性可以带来以下优点：
- 无需进行手动的前端验证。 使用 ServerValidatedForm 可以省略很多繁琐冗余的前端代码，同时还能避免使用客户端 JavaScript 完全验证表单时可能带来的一些麻烦。
- 防止信息被篡改。 服务端验证始终为最终答案，如果用户劫持了前端逻辑并强制提交不良数据，服务器端验证也会在后端进行验证，以确保数据始终有效和安全。
- 简单和灵活。 使用 ServerValidatedForm 可以在不需要重新编写大量 JavaScript 代码的情况下快速添加表单，并使验证逻辑更加便携和可扩展。
在使用 ServerValidatedForm 时，只需将验证逻辑连同表单数据一起发送到服务器，然后将结果返回给前端客户端以进行下一步操作。 这将使前后端分离变得更加容易，并且还可以使用现代框架（如 React、Vue 或 Angular）更轻松地组织代码。
示例
下面是一个使用 ServerValidatedForm 进行表单验证的例子：
HTML 代码：
<form name="myForm" action="/form-submit/" method="POST"> <label>用户名:</label> <input type="text" name="username"><br/> <label>密码:</label> <input type="password" name="password"><br/> <button type="submit">提交</button> </form>
JavaScript 代码：
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------------
--- ---- - ----------------------
--- --- - --- ------------------------- -
---- ----------------
----------- -
-----------------
--
--------------- -
-----------------
--------------------
-
---
--- ---- - ----------------
-----------------在上面的例子中，submit 方法将表单提交到服务器进行验证，如果验证成功，则会调用 onSuccess 函数，如果验证失败，则会调用 onError 函数，并将错误信息打印到控制台上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672381e8991b448e3992