前言
在前端开发中，处理表单验证是非常常见的需求。前端框架如 Ember.js 常常会提供一些默认的验证规则，比如检查是否为空、是否满足长度要求、是否是 email 等等。但是一些更加复杂的验证规则，比如检查两个密码是否相等，就需要我们自己写验证函数了。同时，表单验证本身就是一个和语言、文化紧密相关的问题，所以国际化也是一个需要考虑的问题。
ember-i18n-cp-validations 这个 npm 包提供了一些能够解决这些问题的工具和模板。本文将介绍如何使用这个 npm 包，并给出一些示例代码。
安装
可以通过 npm 安装这个包：
npm install --save ember-i18n-cp-validations
同时，你还需要安装一些依赖包：
npm install --save ember-cp-validations ember-i18n
这个包本身是一组 Ember.js 的 Mixin，可以和 Ember 的组件、控制器、路由等等一起使用。
示例
基本用法
首先，需要创建一个验证规则的定义：
-- -------------------- ---- -------
-- --------------------------
------ -
-----------------
---------------
--------------------
- ---- -----------------------------------------
------ ------- -
----- -
-----------------------
---------------- ---- - --
--
------ -
-----------------------
------- -------
--
--------- -
-----------------------
---------------- ---- - --
--
--------------------- ---------------------- --- ---------- --
-这个例子定义了一个简单的表单，包含一个名字、一个 email 地址、一个密码、和一个再次输入密码的确认字段。这个表单需要的验证规则有：
- 名字必须填，长度要大于等于3。
- email 必须填，并且需要是一个格式良好的 email 地址。
- 密码必须填，并且长度要大于等于6。
- 确认密码必须和密码相同。
接下来，在 Ember.js 的组件中，可以使用这个验证规则来实现表单验证：
-- -------------------- ---- -------
-- -------------------------
------ ----- ---- --------
------ --------- ---- ------------------
------ - -------- - ---- ----------------------------
------ ------- ------------------------
------------ -----------------------
------ -
--------------------------
-------------- - --- ------------------------------------ ----------
--
-------- -
-------- -
--------------------------------- -- -
-- ------------------------ -
------------------------- -------------------------------
-
---
-
-
---在这个组件中，我们通过 Ember 的 init 钩子函数来创建了一个 Ember Changeset。这个 Changeset 在初始化的时候，使用了前面定义的验证规则。我们只需要通过 validate 函数来将这个验证规则转化成一个符合 Ember Changeset 要求的格式。
然后，在 actions 属性中，我们定义了一个 signin 动作。这个动作会在用户点击 “登录” 按钮的时候被调用。在这个动作中，我们通过 changeset.validate() 方法来对整个表单进行验证，然后根据 isValid 属性来判断表单是否符合规则。
国际化
为了支持多种语言的验证错误提示，我们可以通过在 config/environment.js 文件中来配置 ember-i18n。
-- -------------------- ---- -------
-- ---------------------
-------------- - --------------------- -
--- --- - -
-- ---
----- -
-------------- -----
----- -
--- ------------------
--- -----------------
-
--
-- ---
-
-- ---
------ ----
-这里我们假定有两种语言：英语（默认语言）和中文。在项目目录下，我们需要把这些翻译文本存放在对应的路径上（en-GB 是某个“英语”区域的语言标识符）：
-- -------------------- ---- -------
-- --------------------
-
--------- -
---------------- ------- ----- ---- ------
-------------- ----- ---- ---- -- -- ----- ----- ---------- ------
----------------- ------- ----- ---- ----- ---------
-------------- ------- ----- - ----- ----- ---------
-------------------- ----- ----- -- ----------
------------------ ----- -------- ---- -- -- ----- --- ---------- ------
------------------------------------ ------- ----- --- ---- -------- -------
-
--- -------------------- ---- -------
-- --------------------
-
--------- -
---------------- ----------
-------------- -----------------
----------------- --------------
-------------- ---------------
-------------------- ---------
------------------ -----------------
------------------------------------ ------------
-
-然后，我们需要把这些翻译文本加载到 Ember.js 的应用中。这个包提供了一个 mixin，可以方便地实现这个目标：
// app/locales.js
import Ember from 'ember';
import EmberI18nCpValidationsMixin from 'ember-i18n-cp-validations/mixins/locales';
const { Application } = Ember;
Application.reopen(EmberI18nCpValidationsMixin);现在，当我们通过 changeset.validate() 方法来验证表单的时候，我们就能够得到一个和语言相关的错误提示了。
总结
本文介绍了如何使用 npm 包 ember-i18n-cp-validations，来实现一个更加灵活、更好维护的表单验证。我们还介绍了如何实现多语言错误提示。希望这篇文章可以帮助到你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecaa9