如何在Ember-App-Kit(EAK)中实现Ember-验证

Question

我有一个成员-应用程序-工具包应用程序。对于表单，我使用的是成员默认视图。但是对于表单验证，我遇到了这个库，每个人都强烈推荐这个库。余数验证。但我不知道如何在我的eak设置中实现同样的功能。

我有以下问题: 1.我应该在哪里添加验证? 2.定义验证时应该声明什么? 3.错误如何在焦点突出或提交按钮上显示它们？

例如，我有一个注册表格，我想验证名字的姓氏，电子邮件，密码，性别(选择选项)。我该怎么做呢？

如果可能的话，请用JSbin澄清查询。

Answer 1

1. 验证应该提交给控制器，除非您使用动态表单，这是可以复制的。此外，您还必须将ControllerObject封装到这个 var AddController = Ember.ArrayController.extend(Ember.Validations.Mixin，{}

要开始验证，您必须创建名为validations的新对象。

您必须添加要验证的输入值。

  validations: {
          newFirstname:{
            format: { with: /^[A-Za-z-]{2,16}$/, allowBlank: true, message: 'Enter valid name.'  }
          },
          newFamilyname: {
            format: { with: /^[A-Za-z-]{3,16}$/ , message: 'Required field lastname.'  }
          }
        },

显示错误。

   <div class="row">
        <div class="col-md-6 col-xs-4">
            <label>First name: </label>
                {{input type="text" placeholder="First name" value=newFirstname class="form-control"}}

                    {{#if errors.newFirstname}} 
                        <span class="error errorForValidation"><span class="glyphicon glyphicon-warning-sign"></span> {{errors.newFirstname}}</span>
                    {{/if}}

        </div>
        <div class="col-md-6 col-xs-4">
            <label>*Last name: </label>
                {{input type="text" placeholder="Family name" value=newFamilyname class="form-control"}}

                    {{#if errors.newFamilyname}}
                        <span class="error"><span class="glyphicon glyphicon-warning-sign"></span> {{errors.newFamilyname}}</span>
                    {{/if}}

        </div>
    </div><!--end row-->

验证完美无缺时显示按钮

<button type="submit" class="btn btn-primary" {{bind-attr disabled="isInvalid"}}{{action 'GetData'}}>Create</button>

JSBIN：http://emberjs.jsbin.com/iDeQABo/17/edit