前言：本文主要介绍如何使用 npm 包 ember-form-validations 进行表单验证，并提供详细的示例代码和指导意义。该包是一个基于 Ember 框架的表单验证库，它能够帮助开发者快速、简便地实现表单验证功能，适用于同步和异步验证。
简介
ember-form-validations 提供了一种简单的方式来验证 Ember 表单。它使用类似于 jQuery 的方式来选择需要验证的表单 Dom 元素，并提供了一些验证器 (validators)。它很容易添加到 Ember 应用程序中，并提供了很多自定义选项。
在安装和使用 ember-form-validations 之前，请确保您已经了解了 Ember 和 npm 的基本知识。
安装
可以通过 npm 包管理器来安装 ember-form-validations ，请使用以下命令：
npm install ember-form-validations
使用
在添加 ember-form-validations 到 Ember 应用程序之前，我们需要先了解验证器 (validators) 。由于 ember-form-validations 中包含大量的预定义验证器，如果您想为特定的字段添加自定义验证器，那么您需要了解这些预定义验证器的名称和详细信息。
验证器 (Validators)
以下是一些 ember-form-validations 中内置的验证器的名称和描述：
presence 检查给定值是否为空或空白字符串。
length 检查给定值的长度是否在指定范围内。
number 检查给定值是否为数字。
email 检查给定字符串是否为电子邮件格式。
phone 检查给定字符串是否为电话号码格式。
url 检查给定字符串是否为 URL 格式。
此外，在使用数据模型 (model) 添加自定义验证器时，您可以使用下面示例的一些验证器：
format 使用正则表达式检查给定值是否匹配。格式如下：
wording: /^[\w\s\-\(\)]+$/i password: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/ipassword 检查是否为有效密码，使用正则表达式，给定值必须同时包含小写、大写和数字，长度必须大于等于8位。
示例
在本节中，我们将实现一个使用 ember-form-validations 的简单表单。我们将验证以下表单字段：
* 姓名 (name) 字段是否为空 * 电子邮件 (email) 字段是否非空和有效 * 密码 (password) 是否非空，长度是否小于 6 * 电话号码 (phone) 是否非空和有效
首先，我们将创建一个包含这些字段及其相应验证的数据模型：
-- -------------------- ---- -------
------ ----- ---- --------
------ -
----------
----------------
- ---- -----------------------
----- ----------- - ------------------
----- --------------------- ------
------ -
--------------------- ------
------------------- -
----- -------
--
--
--------- -
--------------------- ------
------------------- -
---- -
--
--
------ -
--------------------- ------
------------------- -
----- -------
--
-
---
------ ------- ------------------------------------ -
---在上面的代码示例中，我们使用 validator('presence', true) 来检查给定值name、email、password和phone是否为空。如果要检查字段是否属于某个范围，则可以使用 validator('length', { min: 6 })。
接下来，我们将使用 ember-form-validations 提供的计算属性（computed property）实现这些验证规则。服务器端验证自动处理，因为我们使用此计算属性定义模型数据模型。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ --------- - ---- -------------------------
------ ------- ------------------------------------ -
------------ -
----- --------------------- ------
------ -
--------------------- ------
------------------- -
----- -------
--
--
--------- -
--------------------- ------
------------------- -
---- -
--
--
------ -
--------------------- ------
------------------- -
----- -------
--
-
-
---接下来，我们将在可以进行验证的表单字段上使用计算属性来保证其验证。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ --------- - ---- -------------------------
------ ------- ------------------------------------ -
----- -----
------ -----
--------- -----
------ -----
------ -
----- -
--------------------- -----
--
------ -
--------------------- ------
------------------- -
----- -------
--
--
--------- -
--------------------- ------
------------------- -
---- -
--
--
------ -
--------------------- ------
------------------- -
----- -------
--
-
-
---最后，我们可以在 template 中声明上面的验证字段：
-- -------------------- ---- -------
------- ---------- -----------------------
----- ---- ------ ---------
---------------- ------ ------------
-------
------- ----------- -----------------------
----- ---- ------ ----------
------- ------------ -- ---------
----------------
---------
-------
----- ---- ------ ----------
-------- ------------ -- ----------
------------------
-----------
-------
------- -------------- -----------------------
----- ---- ------ -------------
------- --------------- -- ---------
----------------
---------
-------
------- ----------- ------------------------
----- ---- ------ ----------
------- ------------ -- ---------
----------------
---------
-------在上面的代码示例中，我们使用 get errors 'name' 和 get errors 'email' 等语句来检索验证错误。
总结
至此，本文介绍了如何使用 ember-form-validations 进行表单验证，并通过示例代码和指导意义说明了细节和注意事项。在实际工作中，我们应该根据具体情况，适当调整和扩展验证器和验证规则。最终，我们希望您可以通过 ember-form-validations 更轻松、快速地实现表单验证功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735a890c4f7277583ea1