介绍
ember-cp-validations 是一个支持 Ember.js 的前端验证库。它使用 computed properties 来实现验证。它提供了一些内置的验证器，例如：
- presence
- length
- format
- numericality
除此之外，它还支持自定义验证器和消息。
安装
要使用 ember-cp-validations，你需要先安装它。打开终端，进入你的 Ember 应用程序所在目录，然后运行以下命令：
ember install ember-cp-validations
设置
使用模型
首先，需要创建一个模型来进行验证。在 Ember 中，模型可以通过 Ember Data 或者 Ember Object 来创建。例如：
import Model, { attr } from '@ember-data/model'; export default class User extends Model { @attr('string') firstName; @attr('string') lastName; @attr('string') email; }
请注意，必须使用类型修饰符（例如 @attr）来指定每个属性的类型。
引入验证器
接下来，在模型的文件中引入 ember-cp-validations 组件：
-- -------------------- ---- ------- ------ -- ---- ------------- ------ - ---------- ---------------- - ---- ----------------------- ----- ----------- - ------------------ ---------- --------------------- ------ --------- --------------------- ------ ------ - --------------------- ------ ------------------- - ----- ------- -- - --- ------ ------- ---------------------------- - ---------- ------------------ --------- ------------------ ------ ----------------- ---展开代码
在代码中，我们使用 buildValidations 函数来创建验证规则。buildValidations 接受一个对象，该对象包含每个属性的验证器。验证规则中定义了一个属性的验证器列表。在本例中，firstName 和 lastName 都需要进行非空验证，因此我们使用 validator('presence',true) 来处理。email则需要进行非空和email格式验证，因此使用了一个包含两个验证器的数组。
表单验证
假设你有一个表单，其中包含了姓名和电子邮件。那么你可以通过以下方式来验证：
-- -------------------- ---- ------- ------ --------- ---- ------------------- ------ - ---- ---- -------- - ---- ---------------- ------ - ----- - ---- ------------------------- ------ ------- ------------------ ----- ----- ---------- ------------------------ --------- ----------------------- ------ -------------------- ------------ ----------------------------------------- -------- - ------ - -- ---------- ----------------------- - -- ---- - ---- - --------- ---------------------------- -- - --------------------- --- - - - ---展开代码
在上面的代码中，我们首先从组件的上下文中读取了 user 对象。然后，我们使用 alias 来转换模型属性为组件中的属性。接着，我们使用 computed.reads 来将模型验证属性映射到组件上下文中，并使用 get 来获取组件验证的状态。最后，我们使用 validations.async 来获取验证结果的 promise 对象，以处理异步验证器。
现在你已经可以通过 get(this, 'validations.isValid') 来检查验证的结果了。当验证的结果是 false 时，我们将弹出一个警告框告知用户表单提交失败，并在用户使用异步验证器时等待一个 promise 对象。
自定义验证器
如果内置的验证器不能满足你的需求，你还可以轻松编写自己的验证器。下面是一个示例：
-- -------------------- ---- ------- ------ - --------- - ---- ----------------------- ------ ------- -------- --------------- - ------ ----------------------- ------ - -- ------ -- ------------------------------------------ - ------ ----- - ---- - ------ -------------- - --- -展开代码
在代码中，我们创建了一个名为 composedEmail 的验证器。这个验证器使用 validator 函数来产生一个新的验证器并返回它。我们可以在模型中使用它：
-- -------------------- ---- ------- ------ -- ---- ------------- ------ - ----- - ---- ------------------------- ------ - ---------------- - ---- ----------------------- ------ ------------- ---- ----------------------------------- ----- ----------- - ------------------ ------ - --------------------- ------ --------------- - --- ------ ------- ---------------------------- - ---------- ------------------ --------- ------------------ ------ ----------------- ---展开代码
结论
现在你应该了解了如何使用 ember-cp-validations 来验证 Ember 应用程序中的表单。由于它的灵活性和可扩展性，你可以使用它来实现各种自定义验证逻辑。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ember-cp-validations
