前言
在前端开发中，时常需要处理表单的数据，并将其发送至后端进行处理。而 formulario 是一个能够帮助前端快速生成表单、收集表单数据、进行表单验证以及发送请求等功能的 npm 包。本文将带领大家详细了解如何使用 formulario 包。
安装 formulario
在开始使用 formulario 之前，必须先安装，可以通过 npm 在终端输入以下命令来进行安装：
npm install formulario安装完成后，就可以在项目中使用 formulario 包。
使用 formulario
基本使用
使用 formulario 最基本的方法是先引入 formulario 包，并使用它的构造函数实例化一些表单元素，然后再将这些表单元素插入到页面中。例如，我们可以这样来生成一个简单的表单：
-- -------------------- ---- ------- ------ - ----- ---------- ------ - ---- ------------- ----- ---- - --- ------- ----- --------- - --- --------------------- ------------ ----- ------ - --- ---------------- ---------- -------------------- ----------------- ------------------------------------------------------------------展开代码
在上面的例子中，我们先通过 import 关键字引入了 formulario 包中的 Form、TextField 和 Button 三个构造函数，然后实例化了一个表单元素 form、一个文本输入框 textField 和一个按钮 button。接着，使用 form.add() 方法将 textField 和 button 添加到 form 中，并将 form 插入到 id 为 my-form 的 HTML 元素中。
此时，我们在 HTML 代码中添加一个 id 为 my-form 的元素，就可以看到我们刚刚生成的表单了：
<div id="my-form"></div>
表单验证
formulario 还提供了一些表单验证的功能。例如，我们可以为 textField 添加一个验证器，检查其内容是否合法：
-- -------------------- ---- ------- ------ - ----- ---------- ------- ---------- - ---- ------------- ----- ---- - --- ------- ----- --------- - --- --------------------- ------------ ---------------------------------------------------- -- ------------- ------------------------------------------------------ --------- --- ---- ------- ------- --- ------------ ----- ------ - --- ---------------- ---------- -------------------- ----------------- ------------------------------------------------------------------ ----------------- -- - -- ----------------- - ----------------- ---------- - ---展开代码
上述代码中，我们为 textField 添加了一个 required 验证器和一个正则表达式验证器，检查其内容是否为非空字符串且只包含字母和数字。如果验证通过，点击按钮时弹出“Submitting form...”的信息，否则不执行任何操作。Validators 是 formulario 中预定义的一些验证器，你也可以通过自定义 addValidator() 方法来添加自己的验证器。
除了 addValidator() 方法之外，还有一些其他的验证方法可以使用。例如：
Form.prototype.validate()：验证整个表单。TextInput.prototype.validate()：验证文本输入框。Select.prototype.validate()：验证下拉列表框。Checkbox.prototype.validate()：验证复选框。RadioGroup.prototype.validate()：验证单选框组。
发送请求
通过 formulario 包，我们还可以轻松地为表单数据添加提交请求。例如，我们可以添加一个 onSubmit() 回调函数，将 formData 作为参数传递给后端：
-- -------------------- ---- ------- ------ - ----- ---------- ------- ---------- - ---- ------------- ----- ---- - --- ------- ----- --------- - --- --------------------- ------------ ---------------------------------------------------- -- ------------- ------------------------------------------------------ --------- --- ---- ------- ------- --- ------------ ----- ------ - --- ---------------- ---------- ----------------- -- - -- ----------------- - ----- -------- - ------------------- -- ---- -------- -- --- ------ - --- -------------------- ----------------- ------------------------------------------------------------------展开代码
这样，当用户点击 Submit 按钮时，表单数据将会被从 form 中提取出来，并作为 formData 参数发送给后端。
结束语
通过本文的介绍，相信已经对 formulario 的使用有了一个初步的了解。也许你还可以结合其他的前端工具库（如 React、Vue 等）进行更灵活的使用。无论如何，我们都应该不断地学习和探索新的工具和技术，以便更好地开发出优质的前端产品。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74056
