11

EmberJS でフォ​​ームを検証するための一般的なパターンは何ですか? 私の App.IndexView にはフォームがあり、送信ボタンをクリックするとターゲットがビューに設定されるため、検証を行うことができます。これは、エラーのあるフィールドで何かをする必要があるところまでうまく機能します。エラーのあるフィールドにクラスを追加したいのですが、その方法がよくわかりません。IndexView はフォームを検証する必要がありますか、それともフィールドごとにぼかしで自己を検証するビューを作成する必要がありますか? 以下は、IndexView にあるものです。

App.IndexView = Ember.View.extend


  create: (model) ->

    valid = @_validate model

    if valid is true
      @get('controller').send 'createUser'
    else
      # HANDLE THE FIELDS WITH ERRORS

  _validate: (model) ->

    invalid = []
    validations = {
      firstName: @_validateString model.get 'firstName'
      lastName: @_validateString model.get 'lastName'
      email: @_validateEmail model.get 'email'
      password: @_validatePassword model.get 'password'
      accountType: @_validateString model.get 'accountType'
    }

    # This will get all of the values then runs uniq to see if the
    # form is valid
    validForm = _.chain(validations).values().uniq().value()

    if validForm.length is 1 and validForm[0]
      true
    else
      # other wise build up an array of the fields with issues
      for field, val of validations
        if val is false
          invalid.push field

      invalid

  _validateString: (str) ->
    return false unless str
    if str isnt '' then true else false

  _validateEmail: (str) ->
    pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    pattern.test str

  _validatePassword: (str) ->
    return false unless str
    if str.length >= 6 then true else false

そしてテンプレート

<div class="row">
  <div class="span12">
    <div class="signup">
      <form class="form-horizontal offset3">
        <div class="control-group">
          <label class="control-label" for="first_name">First Name</label>
          <div class="controls">
            {{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}}
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="last_name">Last Name</label>
          <div class="controls">
            {{ view Ember.TextField placeholder="Last Name" required="true" valueBinding='lastName' name='last_name' viewName='lastNameField'}}
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="email">Email</label>
          <div class="controls">
            {{ view Ember.TextField placeholder="Email" required="true" type="email" valueBinding='email' name='email' viewName='emailField'}}
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="password">Password</label>
          <div class="controls">
            {{ view Ember.TextField placeholder="Password" required="true" type="password" valueBinding='password' name='password' viewName='passwordField'}}
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="">Account Type</label>
          <div class="controls">
            {{#view Ember.RadioButtonGroup name="accountType" required="true" valueBinding="accountType"}}
              <label class="radio">
                {{view RadioButton checked='false' value="landlord"}}
                Landlord
              </label>
              <label class="radio">
                {{view RadioButton checked='false' required="true" value="tenant"}}
                Tenant
              </label>
            {{/view}}
          </div>

        </div>
        <div class="control-group">

          <div class="controls">
            <input class="btn btn-primary" {{action create model target='view' }} type="submit" value="Sign Up">
          </div>

        </div>
      </form>

    </div>

  </div>

</div>
4

1 に答える 1

23

EmberJS でフォ​​ームを検証するための一般的なパターンは何ですか?

使用パターンはいくつかあるようです。検証対象によってかなり異なりますが、一般的な戦略は、ビジネス ロジックをビュー レイヤーからできるだけ遠ざけることです。役に立つと思われるいくつかのリンクを次に示します。

  • validations-in-emberjs-application.htmlでは、コントローラー レベルで検証を実行することを推奨しています。ビューを使用して、フォーカスが変更されたときに検証をトリガーします。このスクリーンキャストは、このパターンを使用していくつかの単純なフォーム フィールドを検証する方法を示しています。

  • Asynchronous-Form-Field-Validation-With-Emberは、ビュー レイヤーで簡単な検証を実行するために使用できるいくつかの再利用可能なコンポーネントを提供します。

  • ember-validationsは、任意の ember-object にアクティブ レコード スタイルの検証機能を追加するために使用できるライブラリです。

私の App.IndexView にはフォームがあり、送信ボタンをクリックするとターゲットがビューに設定されるため、検証を行うことができます。これは、エラーのあるフィールドで何かをする必要があるところまでうまく機能します。エラーのフィールドにクラスを追加したいのですが、その方法がよくわかりません。

一度に多数のフィールドを検証しようとしているので、この検証ロジックをコントローラーに移動する方が理にかなっています。どちらの方法でも、通常は次のように、特定のフィールドのクラス属性をプロパティにバインドします。

<div class="controls" {{bindAttr class=firstNameError:error:success}}>
  {{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}}
</div>

firstNameErrorしたがって、これを使用して、検証の結果に応じて true/false を返すプロパティを追加します。実装を考えると、実行時にこのプロパティを設定することはおそらく理にかなっています_validateが、リアルタイムで検証を実行する計算されたプロパティにすることもできます。

IndexView はフォームを検証する必要がありますか、それともフィールドごとにぼかしで自己を検証するビューを作成する必要がありますか?

それは、ユーザーエクスペリエンスをどのようにしたいかによって異なります。FWIW 私の投票は on-blur です。

于 2013-01-30T19:30:21.453 に答える