如何在Ember-App-Kit（EAK）中实现Ember-Validations [英] How to implement Ember-Validations in Ember-App-Kit(EAK)

问题描述

我有一个ember-app-kit应用程序。对于我使用ember默认视图的形式。但是对于表单验证，我遇到了这个lib，大家强烈推荐。 Docard的Ember验证。但我不知道如何用我的eak设置实现相同的。

我有的问题：
1.我应该在哪里添加验证？
2.定义验证时要声明的内容？
3.错误如何显示焦点或甚至提交按钮？

说，我有一个注册表单，我想验证一个名字姓，电子邮件，密码，性别（选择选项）。我应该怎么做？

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

解决方案

1. 验证应该去控制器，除非你使用dyanmic formets，被重复。另外你必须将ControllerObject包装到这个

   
   
   

   var AddController = Ember.ArrayController.extend（Ember.Validations.Mixin，{}

要开始验证，您必须使新的Object命名验证

您必须将输入值添加到验证

 验证：{
 newFirstname：{
格式：{with：/ ^ [A- Za-z  - ] {2,16} $ /，allowBlank：true，message：'输入有效的名称'} 
}，
 newFamilyname：{
格式：{with：/ ^ [A-Za-z  - ] {3,16} $ /，消息：'必填字段lastname。'} 
} 
}，
  

显示错误。

 < div class =row > 
< div class =col-md-6 col-xs-4> 
< label>名字：< / label> 
 {{input type = textplaceholder =First namevalue = newFirstname class =form-control}} 
 
 {{#if errors.newFirstname}} 
< span class =error errorForValidation>< span class =glyphicon glyphicon-warning-sign>< / span> {{errors.newFirstname}}< /跨度> 
 {{/ if}} 
 
< / div> 
< div class =col-md-6 col-xs-4> 
< label> *姓氏：< / label> 
 {{input type =textplaceholder =Family namevalue = newFamilyname class =form-control}} 
 
 {{#if errors.newFamilyname}} 
< span class =error>< span class =glyphicon glyphicon-warning-sign>< / span> {{errors.newFamilyname}}< /跨度> 
 {{/ if}} 
 
< / div> 
< / div><！ - 结束行 - > 
  

验证无瑕疵时显示按钮

 < button type =submitclass =btn btn-primary{{bind-attr disabled =isInvalid}} {{action'GetData'}}>创建&按钮> 
  

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

I have a ember-app-kit application. For the form I am using ember default views. But for form validations I have came across with this lib which everyone highly recommends. Ember Validations By Docyard . But I am not sure how to implement the same with my eak set-up.

Questions that I have: 1. Where should I add validations ? 2. What to declare when defining validations? 3. Errors how to show them on focus out or even on submit button ?

Say for example I have a sign up form and I want to validate firstname lastname, email, password, gender(select options) . How should I go about it ?

If possible please clarify the queries with a JSbin.

解决方案

1. Validations should go to controller, unless your working with dyanmic formsets, which can be duplicated. Also u have to wrap ControllerObject into this

   var AddController = Ember.ArrayController.extend(Ember.Validations.Mixin, {}

To start validation u have to make new Object named validations

You have to add input value to be validated

  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.'  }
          }
        },

Showing errors.

   <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-->

Showing button when validation is flawless

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

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

这篇关于如何在Ember-App-Kit（EAK）中实现Ember-Validations的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！