介绍
blear.classes.validation 是一个轻量级的 JavaScript 类库，用于前端表单的数据验证。它可以轻松应对表单数据的校验需求，包括验证必填项、正则表达式验证、最大值最小值验证等。在开发前端项目时，blear.classes.validation 可以帮助我们提高开发效率、减少代码量，并使表单数据校验变得更加简单。
安装
blear.classes.validation 是作为一个包发布到了 npm 上，因此我们可以使用 npm 或者 yarn 安装。
npm install blear.classes.validation --save
或者
yarn add blear.classes.validation
使用
引入
在使用时，我们需要使用 ES6 的模块化语法将其引入。例如：
import Validation from 'blear.classes.validation';
初始化
接着，我们可以创建一个新的 Validation 实例。
-- -------------------- ---- -------
----- ---------- - --- ------------
--- --------
------ -
-
----- -----------
--------- -----
-------- ----------
--
-
----- --------
--------- -----
-------- ---------
--
-
----- --------
----- -------------------------------------------------------
-------- -----------
--
-
----- -----------
---- --
---- ---
-------- ------- ---- -------
--
-
----- ------
----- ---------------------
-------- -------------
-
-
---在这个例子中，我们使用了 new Validation() 创建了一个名为 validation 的实例，并传递了两个参数：
el：选择器，指定了要进行验证的表单的 dom 元素。rules：规则数组，用于指定要验证表单的各项数据并定义验证规则及错误提示。
其中，rules 的每一项都是一个对象，包含以下属性：
name：表单项的名字，用于指定验证哪个表单项。required：是否为必填项，默认为 false。rule：用于验证表单项数据的正则表达式。min：最小值，用于验证数字类型的表单项数据。max：最大值，用于验证数字类型的表单项数据。message：错误提示信息。
验证
在初始化之后，我们可以调用 validate() 方法对表单进行校验。调用该方法后，如果表单数据符合验证规则，则 validate() 方法返回一个空对象 {}。否则，它会返回一个对象，该对象包含了验证失败的表单项的信息。
const result = validation.validate();
if (Object.keys(result).length === 0) {
// 验证通过
} else {
// 验证失败
console.log(result);
}代码示例
接下来，我们来看一下一个简单的示例。这里我们将构建一个包括用户名、邮箱、密码、手机号码四项的表单，并对其进行验证。
-- -------------------- ---- -------
--------- -----
------
------
----------------- ---------------
----- ----------------
-------
------
----- ----------
-------
----
------ ----------- -----------------
--------
-------
---
------ ----------- --------------
--------
-------
---
------ --------------- -----------------
--------
-------
-----
------ ----------- ------------
--------
------- -------------------------
-------
------- --------------
------ ---------- ---- ---------------------------
----- ---------- - --- ------------
--- --------
------ -
-
----- -----------
--------- -----
-------- ----------
--
-
----- --------
--------- -----
-------- ---------
--
-
----- --------
----- -------------------------------------------------------
-------- -----------
--
-
----- -----------
---- --
---- ---
-------- ------- ---- -------
--
-
----- ------
----- ---------------------
-------- -------------
-
-
---
----- ---- - --------------------------------
------------------------------- --- -- -
-------------------
----- ------ - ----------------------
-- --------------------------- --- -- -
--------------
- ---- -
-------------------
-
--
---------
-------
-------在这个示例中，我们首先使用 import 将 Validation 类进行引入。然后创建了一个 validation 对象并添加了相关的验证规则。
这个表单有一个提交按钮，我们监听了表单提交事件 submit。当表单提交时，调用了 validation.validate() 方法来检查表单数据的有效性，如果验证通过，则弹出一个提示框，告知用户验证通过，如果验证失败，则报告验证失败并提示用户检查输入。
总结
通过本文的介绍，我们可以知道，使用 blear.classes.validation 可以方便地对前端表单数据进行校验，从而提高了我们的开发效率，并减少了冗余的代码。
当然，blear.classes.validation 除了上述介绍的功能外，还有很多其他的特性，读者们可以前往官方网站查看文档以了解更多详情。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672673660cf7123b365a3