什么是 @noticeable/fulect？
@noticeable/fulect 是一个快速生成表单的工具库，提供了多种组件和表单验证方法，能够快速构建一个符合设计要求的表单页面。
安装
安装最新版的 @noticeable/fulect：
npm install @noticeable/fulect
使用示例
下面以一个简单的表单为例，展示如何使用 @noticeable/fulect。
-- -------------------- ---- -------
----- ------------
-------
----
------ ----------- ------------
--------
-------
-----
------ ------------ -------------
--------
------- -----------------------------
-------首先引入 @noticeable/fulect：
import { createForm } from "@noticeable/fulect";然后在 JavaScript 文件中使用 createForm 来创建表单：
-- -------------------- ---- -------
----- ---- - ------------
------- -
----- - --------- ---- --
------ - --------- ---- --
--
--------- ---------- -- -
----------------------
--
---在 createForm 的参数中，我们使用了 inputs 和 onSubmit 这两个字段来描述表单的验证规则和提交后的回调函数。
其中，inputs 表示每个表单元素的验证规则。上面的代码中，我们要求 name 和 email 字段为必填字段。
onSubmit 表示提交表单后的回调函数，其中 formData 参数表示用户提交的表单数据。
最后，我们调用 form.mount() 方法来将表单挂载在对应的 HTML 元素上：
form.mount("#myForm");完成后，即可在页面中看到对应的验证提示信息，如下图所示：
表单验证
使用 inputs 字段可以为表单元素添加各种验证规则，以满足不同的设计要求。
必填字段
将 required 属性设置为 true 来让某个表单元素为必填字段。
-- -------------------- ---- -------
----- ---- - ------------
------- -
----- - --------- ---- --
------ - --------- ---- --
--
--------- ---------- -- -
----------------------
--
---数据类型
可以通过 type 属性来指定表单元素的数据类型，目前支持 text, email, number, date, time, datetime 等常见数据类型。
-- -------------------- ---- -------
----- ---- - ------------
------- -
----- - ----- ------ --
------ - ----- ------- --
---- - ----- -------- --
--------- - ----- ------ --
----- - ----- ------ --
--------- - ----- ---------- --
--
--------- ---------- -- -
----------------------
--
---正则表达式验证
可以使用 match 属性来指定一个正则表达式，用于对表单元素的值进行验证。
-- -------------------- ---- -------
----- ---- - ------------
------- -
----- - ------ ------------- --
------ - ------ ---------------------------------------- --
--
--------- ---------- -- -
----------------------
--
---数值范围验证
可以使用 min 和 max 属性来限制数值型表单元素的范围。
const form = createForm({
inputs: {
age: { type: "number", min: 0, max: 100 },
},
onSubmit: (formData) => {
console.log(formData);
},
});字符串长度验证
可以使用 minLength 和 maxLength 属性来限制字符串型表单元素的长度范围。
const form = createForm({
inputs: {
password: { type: "text", minLength: 6, maxLength: 12 },
},
onSubmit: (formData) => {
console.log(formData);
},
});自定义错误提示消息
可以使用 error 属性来设置表单元素的错误提示消息。
const form = createForm({
inputs: {
name: { required: true, error: "Please fill in your name." },
},
onSubmit: (formData) => {
console.log(formData);
},
});表单提交
使用 onSubmit 字段可以指定表单提交时的回调函数，我们可以在这个函数中获取到用户提交的表单数据。
-- -------------------- ---- -------
----- ---- - ------------
------- -
----- - --------- ---- --
------ - --------- ---- --
--
--------- ---------- -- -
----------------------
--
---总结
本文介绍了 @noticeable/fulect 这个 npm 包的基本使用方法，包括表单的验证和提交。通过这个工具库，我们能够快速、方便地生成符合设计要求的表单页面，提升了前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601281e8991b448de085