什么是 goldenfinger.js
goldenfinger.js 是一款前端常用的表单验证插件，其特点在于简单易用且支持自定义验证规则。通过使用 goldenfinger.js，您可以快速地对表单进行验证，并在验证失败时给出相应的提示信息。
安装与引入
使用 npm 进行安装：
--- ------- --------------- ------
在项目中引入 goldenfinger.js：
------ ------------ ---- ------------------
使用方法
使用 goldenfinger.js 构建表单验证，只需几个简单的步骤。
1. 为表单元素添加必要的属性
在 HTML 中，您需要为每个需要进行验证的表单元素添加对应的属性。比如，如果您需要验证一个用户名输入框，就需要为该输入框添加 data-rule 属性和 data-msg 属性。
------ ----------- --------------- ----------------------------- ----------------------------
其中，data-rule 属性用于设置验证规则，多个验证规则之间使用 | 分隔；data-msg 属性用于设置验证失败时的提示信息，多个提示信息也需要使用 | 分隔。
2. 配置验证规则
在 JavaScript 中，您需要配置要使用的验证规则。goldenfinger.js 内置了一些常用的验证规则，比如 required、email、mobile 等等。您也可以通过调用 addMethod 方法来添加自定义的验证规则。调用 addMethod 方法时，需要传入两个参数：验证规则的名称和一个验证函数。
---------------------------------- --------------- -------- - ------ -------------------- -- ------------
在上面的代码中，我们添加了一个名为 username 的验证规则，该规则会检查输入框中的值是否全部由数字、字母或下划线组成，如果不是，则验证失败，并提示“用户名格式不正确”。
3. 执行表单验证
在页面加载完成后，您可以调用 validate 方法对表单进行验证。
----- ---- - -------------------------------
------------------------------- ----------- -
-------------------
------------------------------- -
----------------------
-
---在上面的代码中，我们在表单提交时调用了 validate 方法，并根据返回值来确定表单是否验证通过。
示例代码
--------- -----
------
------
----- ----------------
---------------------- ------------
-------
------
------
-----
------ ---------------------------
------ ----------- --------------- ----------------------------- ----------------------------
------
-----
------ --------------------------
------ --------------- --------------- -------------------- ------------------
------
------- -------------------------
-------
------- ------------------------------------------------------------
--------
---------------------------------- --------------- -------- -
------ --------------------
-- ------------
----- ---- - -------------------------------
------------------------------- ----------- -
-------------------
------------------------------- -
----------------------
-
---
---------
-------
-------总结
通过本文，您已经学习了如何使用 npm 包 goldenfinger.js 进行表单验证。希望本文能对您有所指导，减少您在使用表单验证插件时的困惑。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e6e255dee6beeee7408