简介
ember-validate-js 是一个针对 Ember.js 框架的校验库。它提供了丰富的校验规则，并且支持自定义校验规则。在开发 Ember.js 应用时，使用该库可帮助我们轻松地实现表单校验。
安装
首先需要安装 npm 包，打开命令行工具，执行以下命令：
npm install --save ember-validate-js
使用方法
在 Ember.js 应用中，我们需要在组件中引入 ember-validate-js 相应的类库并声明校验规则，然后通过调用 validate() 方法即可实现表单校验。
引入类库和声明校验规则
在组件的 js 文件中，我们需要引入 Ember.js 和 ember-validate-js 相应的类库：
import Ember from 'ember'; import ValidateMixin from 'ember-validate-js/mixins/validate';
然后声明需要校验的属性及其对应的校验规则：
-- -------------------- ---- ------- ------ ------- ------------------------------------- - - ----- --- - - ---- --- - - ------- --- - - ------ - - - - - ----- - - - - - - - --------- ----- - - - - - - ------- - - - - - - - - - -------- -------------- - - - - - - - - -------- ---------- - - - - - - - - - - - -- - - - - ---- - - - - - - - --------- ----- - - - - - - ------------- - - - - - - - - - ------------ -- - - - - - - - - -------- ---------- - - - - - - - - - - - -- - - - - ------- - - - - - - - --------- ---- - - - - - - - - ---
在上述代码中，我们声明了组件中需要校验的属性 name、age 和 gender，并分别为它们定义了校验规则。规则定义采用了 JSON 格式，其中：
- required 表示必填；
- format 表示格式校验；
- numericality 表示数字校验；
- message 表示校验失败时的提示信息。
具体规则的使用方法，可参见官方文档。
调用 validate() 方法
在模板文件中，我们可以为表单中的输入框绑定值：
{{input value=name}}
{{input value=age}}
{{input value=gender}}然后在组件中，我们可以为其中一个按钮绑定 validate() 方法：
<button {{action "validate"}}>提交</button>最后，在组件的 js 文件中，我们需要为 validate() 方法实现逻辑：
-- -------------------- ---- ------- ------ ------- ------------------------------------- - - - --- - - -------- - - - - - ---------- - - - - - - - -- --------------------- - - - - - - - - - -- --------- - - - - - - - ---- - - - - - - - - - -- --------- - - - - - - - - - - - - - - - ---
isValid 标志位表示校验是否通过。在校验未通过时，可以通过 errors 属性获取错误信息，例如：
this.get('errors.name')[0].message // 获取姓名输入框的第一条错误信息自定义校验规则
除了官方提供的校验规则外，我们还可以自定义校验规则。例如，我们可以自定义一个校验规则，要求密码必须包含大小写字母、数字和特殊字符：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- -------------------- ----- ------------------ - ------------------------ -------- ---- ----------- - - - ----- --------------- - --------------------------------------------------- - - ------ --------------------------- -- ---------------- --- ------ ------- ------------------------- - - ------ - - - - - --------- - - - - - - - --------- ----- - - - - - - ------------------- - - - - - - - - - -------- --------------------------- - -- - - - - - - - - - - - - - - -- - - ------------------- ------------------ ---
在上述代码中，我们导入了 Validate 类的构造函数，并定义了一个校验规则 PasswordComplexity。这个规则接受一个 options 对象作为参数，其中 message 表示校验失败时的提示信息。在规则函数中，我们使用了正则表达式来判断密码的复杂度是否符合要求。
然后我们在 rules 集合中声明了 password 规则，并使用了刚刚自定义的 passwordComplexity 规则来校验密码的复杂度。
自定义规则的详细编写方法，可参见官方文档。
总结
简单介绍了 Ember.js 应用中使用 ember-validate-js 进行表单校验的方法，包括声明校验规则、调用 validate() 方法、自定义校验规则等。希望本篇文章对于前端开发者在 Ember.js 中进行表单校验有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ba563576b7b1ecc44