前言
在前端开发中，验证输入数据的合法性是非常必要的环节。为了提高开发效率和代码质量，现在有很多前端验证库和工具。今天我们要介绍的是一款基于 Ember.js 的验证库：ember-stickler。它的特点是集成了 HTML5 验证和自定义验证规则，可以为开发者提供很好的体验和灵活性。
安装与使用
安装
在使用 ember-stickler 之前，你需要先安装 Ember.js。如果你还没有使用过 Ember.js，可以先学习官方文档。
安装 ember-stickler 可以使用 npm 或 yarn：
npm install --save-dev ember-stickler # 或者 yarn add --dev ember-stickler
使用
在你的表单组件中使用 ember-stickler 非常简单。首先，在 app/components 下新建一个组件（例如 my-form），在组件的 template.hbs 中定义表单：
-- -------------------- ---- -------
---------------- ---------------- -----------
----------
-------
-----
------- ------------- ------------
-------------- --------
--------
-------
------
------- ------------- -------------
-------------- ------- --------------
--------
-------
---------
------- ------------- -------------- -----------------
-------------- ------------
--------
------- -----------------------------
-----------
------------------在这个表单中，我们使用了 stickler-form 和 stickler-for 两个标签。stickler-form 标签定义一个表单，并绑定了一个 submit 事件。stickler-for 标签定义了一个表单项和它的验证规则，这里的规则是使用 HTML5 默认规则和自定义规则结合。type 属性指定了表单项的类型，如果你不指定类型，ember-stickler 会自动根据 input 标签的类型进行匹配。
在上述模板中的几个指令，由以下介绍中的代码负责实现。
首先，我们在组件中定义一些验证规则，在 app/components/stickler-rules.js 文件中：
-- -------------------- ---- -------
------ ------------- ---- -----------------------
------ ------- ----------------------
----- -
- ----- ----------- -------- ----- -- --------- --
- ----- ------------ -------- - ------ - -- -------- ----- ------ -- -- ----- - ----------- --
--
------ -
- ----- ----------- -------- ------ -- --------- --
- ----- -------- -------- ------ -- -------- --
--
--------- -
- ----- ----------- -------- --------- -- --------- --
- ----- ------------ -------- - ------ - -- -------- --------- ------ -- -- ----- - ----------- --
--
---这里 name、email 和 password 分别代表三个表单项，每个项中是一个包含不同验证规则的数组。每个具体的验证规则都由一个 type 属性和一个 options 属性组成。type 属性表示这个规则的类型（比如必填、email格式等），而 options 属性就是该规则的参数，比如最短长度等。
接下来我们在组件的代码中引入 stickler-rules 并调用 setValidationRules 方法来注册规则：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ ------------- ---- -------------------
------ ------- ----- --------------- ------- --------- -
------------- -
--------------------
---------- - -----------------------
------------------------------------
-
-------
-------- -
-- ----------------------- -
-------------- ---- --------
-------
-
-- ------ ---- ----
-
-在构造函数中，我们创建了一个 SticklerRules 实例，并使用 setValidationRules 方法传递当前组件的实例对象，这样 ember-stickler 就可以正确地设置验证规则。isValid 方法用于判断当前表单中是否有问题。
好了，到这里为止，我们已经完成了 ember-stickler 的基本使用。你可以完成一些自定义的样式和验证规则以及对组件的优化。
实例
最后，让我们看一段完整的代码示例，展示了如何使用 ember-stickler 创建一个简单的表单：
-- -------------------- ---- -------
---- ---------------------------------------- ---
---------------- ---------------- -----------
----------
-------
----- -----
------- ------------- -----------------
-------------- ----------- -------------
--------
-------
---- -----
------- ------------- ----------------
-------------- ---------- -------------
--------
-------
------
------- ------------- -------------
-------------- ------- --------------
--------
-------
---------
------- ------------- -------------- -----------------
-------------- ------------
--------
------- -----------------------------
-----------
-------------------- -------------------- ---- -------
-- -----------------------------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ ------------- ---- -----------------------
------ ------- ----- ------------------- ------- --------- -
------------- -
--------------------
---------- - ----------------------
---------- -- ----- ----------- -------- ------ ---- -- --------- ---
--------- -- ----- ----------- -------- ----- ---- -- --------- ---
------ -
- ----- ----------- -------- ------ -- --------- --
- ----- -------- -------- ------ -- -------- --
--
--------- -
- ----- ----------- -------- --------- -- --------- --
- ----- ------------ -------- - ------ - -- -------- --------- ------ -- -- ----- - ----------- --
--
---
------------------------------------
-
-------
-------- -
-- ----------------------- -
-------------- ---- --------
-------
-
-- ----- ------ ---- ----
-
-在这个示例中，我们创建了一个表单，有四个表单项：firstName、lastName、email 和 password。我们在组件中定义了四个验证规则，分别为：firstName 和 lastName 为必填项，email 为必填项且格式正确，password 为必填项且长度不小于 6。如果表单验证失败，会弹出一个提示框。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca28