前言
在开发 Ember.js 应用时，前端表单校验是必不可少的一部分。而 ember-parsley 这个 npm 包就是用来帮助我们实现表单校验功能的。
本文将详细介绍如何使用 ember-parsley 来实现表单校验功能，以及相关的配置和 API。
安装和调用
将 ember-parsley 添加到项目中，使用如下命令：
ember install ember-parsley
然后在需要校验的模板文件中（通常是表单模板文件）添加如下代码：
{{#parsley-form onSubmit=(action 'submit')}}
{{input type="text" name="name" required="true"}}
{{input type="text" name="email" required="true" type="email"}}
<button type="submit">Submit</button>
{{/parsley-form}}这里我们使用了 parsley-form 和 parsley-input 组件来完成校验。其中 parsley-form 组件自动监听表单 submit 事件，可以通过传递 onSubmit handler 来自定义 submit 事件处理逻辑。
在组件中，我们可以使用 parsley 来调用相关方法，例如：
-- -------------------- ---- -------
------ ---------- ---- --------------------
------ ------- -------------------
-------- -
-------- -
-- ------------------------- -
-- ------
- ---- -
-- -------
-
-
-
---配置和 API
ember-parsley 提供了一些配置项和 API 来满足不同的需求。下面我们将介绍常用的配置项和 API。
配置项
p-form-config 可以在 parsley-form 组件中使用来进行配置，例如：
{{#parsley-form onSubmit=(action 'submit') p-form-config=formConfig}}
...
{{/parsley-form}}其中 formConfig 可以是一个 Object，包含以下配置项：
trigger: String: 定义触发表单校验的事件，默认是submit；errorClass: String: 定义错误提示信息样式，默认是parsley-error；successClass: String: 定义验证通过的样式，默认是parsley-success；errorsWrapper: String: 定义错误信息容器的 HTML 标签，默认是ul；errorTemplate: String: 定义错误信息列表项的 HTML 模板，默认是<li></li>。
API
在组件中，我们可以使用以下 API 来进行校验和获取信息：
this.parsley.validate(): 执行表单校验，返回校验结果；this.parsley.validate('fieldName'): 校验指定字段；this.parsley.hasErrors(): 判断表单是否存在错误；this.parsley.fields: 获取表单字段实例；this.parsley.errors: 获取所有表单错误信息；this.parsley.getFieldErrors('fieldName'): 获取指定字段的错误信息；
示例代码
我们来看一个完整的例子：
-- -------------------- ---- -------
--------------- ---------------- --------- --------------------------
------- ----------- ----------- -----------------
------- ----------- ------------ --------------- --------------
------- --------------- --------------- --------------- ---------------
-------
------ --------------- ------------ --------------------- -- ----- --- ----------
--------
------- -----------------------------
-----------------
----- --------
----
------- ------ -- ---------
------------------
---------
-----
--------- -------------------- ---- -------
------ ---------- ---- --------------------
------ ------- -------------------
----------- -
-------- ---------
----------- ------------
------------- --------------
-------------- -----
-------------- ---- -------------------------
--
-------- -
-------- -
-- ------------------------- -
-- ------
- ---- -
-- -------
------------------ ---------------------
-
-
-
---在这个例子中，我们校验了 3 个字段：name, email, password，同时也要求用户同意潜在的 terms and conditions 条款。如果校验不通过，我们将错误信息保存在 errors 属性中，并在模板中输出。
总结
通过本文的介绍，我们了解了如何使用 ember-parsley 来进行表单校验，以及常用的配置项和 API。但是在实际的开发中，只有深入理解整个校验机制，才能更好地使用 ember-parsley 来实现复杂的校验逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca62