1. 什么是 Ember-Parsley-js？
Ember-Parsley-js 是一款方便实用的基于 Ember.js 的表单验证插件，它是从web实时表单验证库 parsley.js 派生而来，并针对 Ember.js 框架进行了特殊的优化和改进。
使用 Ember-Parsley-js 可以使表单验证变得异常简单、方便和直观，一个简单的验证可以使用一个易懂的属性，而且还支持多种自定义和扩展功能，被广泛应用于各种web表单的数据验证。
2. Ember-Parsley-js 的特点
- 支持各种表单验证逻辑，包括必填、邮箱、URL、手机号等等；
- 支持错误提示，含有标准的 CSS 样式，如错误提示信息的颜色、位置、文本等，可根据具体需求自定义；
- 支持自定义样式、行为和事件，可以灵活的调整验证方式来满足不同的项目需求，而不用复杂的自定义验证。
- 可以完美兼容 Crimson Panda Parsley js，配置灵活、开发方便。
3. Ember-Parsley-js 安装与使用
3.1 安装
安装 Ember-Parsley-js 非常简单，只需要在项目根目录下执行以下命令即可：
npm install ember-parsley-js --save-dev
3.2 使用
首先，我们需要在想要验证的表单中，添加如下代码：
<form {{action "submitForm" on="submit"}}>
{{input type="text" label="name" value=name placeholder="name" parsley-name="name" required=true}}
{{input type="email" label="email" value=email placeholder="email" parsley-name="email" required=true}}
{{input type="text" label="phone" value=phone placeholder="phone" parsley-pattern="^/d{3}-/d{3}-/d{4}$" parsley-trigger="change" parsley-error-message="Invalid format!"}}
<button class="btn btn-primary" type="submit">Submit</button>
</form>其中，parsley-name、parsley-pattern 和 parsley-error-message 等属性用于定义验证逻辑、事件和错误提示等。
然后，在 Ember 应用中添加组件的声明和定义，如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
------ ------- -------------------------------------- -
--------------
--- -- ------
--
------- --------
--- -- -------
--
----------
--- -- ----------
--
--最后一步就是在特定的验证函数中调用验证器来完成验证，如下：
this.validator().validate().done(function(){
self.sendAction(); // 验证表单无误后执行操作
})4. Ember-Parsley-js 的高级特性
Ember-Parsley-js 还有很多高级特性，比如更进一步的验证逻辑、自定义事件的配置、自定义错误提示信息等等。
在使用 Ember-Parsley-js 的过程中，需要注意的是，始终按照文档进行配置和使用，文档中详细介绍了此插件的各种特性和方法，充分利用这些特性和方法，可以为我们的web应用程序开发提供极大的方便和优化。
5. 样例代码
最后，提供一个较为完整和充分的样例代码供大家参考：
-- -------------------- ---- -------
----- -------- ------------ --------------
---- -------------------
------- ----------- ------------ ---------- ------------------ ------------------- ---------------
------
---- -------------------
-------- ------------ ------------- ----------- ------------------- -------------------- ----------------------- ---------------
------
---- -------------------
-------- ----------- ------------- ----------- ------------------------------------- ------------------------ ------------------------------ -------- -------------------------------- ---------------
------
---- -------------------
-------- --------------- ---------------- -------------- ---------------------- --------------------- ---------------------- -------------------------------- ----------------------- ------------------------------ ------- ------------------------------ ------ ----------------------------- ------- --- -----------
------
---- -------------------
-------- ---------- ------------ -----------------------------
------
--------- -------------------- ---- ------- ------ ----- ---- -------- ------ -------------- ---- ------------------- ------ ------- -------------------------------------- - -------------- ------------ ------------- -- ------- -------- ------------- -- ------ - - ------- -- ---------- ------------------ -------------- -- ---
以上是本篇文章的全部内容，希望对你的前端工作有一定帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596381e8991b448d6dee