25

クライアント側の検証と残り火をどのように処理していますか?

すぐに使えるものや検証を処理するプラグインはありますか?

4

7 に答える 7

17

https://github.com/dockyard/ember-validationsが役立つ場合があります。また、Ember-easy-formにも接続できます

于 2013-03-25T09:16:22.063 に答える
14

Ember.TextField (または検証する入力タイプ) を拡張し、計算されたプロパティで classBinding を使用します。サンプルは次のとおりです: http://jsfiddle.net/caligoanimus/7UNRd/

テンプレート：

<script type="text/x-handlebars" >
    {{view App.AlphaNumField
        placeholder="alpha-numeric data only"
        valueBinding="App.alphaNumInput"}}
</script>

応用：

App = Ember.Application.create({
    AlphaNumField:  Ember.TextField.extend({
        isValid: function() {
            return /^[a-z0-9]+$/i.test(this.get('value'));
        }.property('value'),
        classNameBindings: 'isValid:valid:invalid'
    })
});
于 2013-04-06T06:24:01.110 に答える
3

@caligoanimus と非常によく似た方法で処理してきましたが、テキスト ボックスからフォーカスを外して検証し、エラー メッセージを追加しました。

コード：

App.TextFieldEmpty = Ember.TextField.extend({
   focusOut: function() {
      var valid = this.get('value') ? valid = true : valid = false;
      this.$().next(".err").remove();

      if(!valid){
        this.$().addClass("invalid").after("<span class='err'>This field is required</span>");
      } else {
        this.$().removeClass("invalid")
      }
   }
});

テンプレート：

<script type="text/x-handlebars">
   {{view App.TextFieldEmpty}}
</script>

JSBIN:

http://jsbin.com/uriroYO/6/edit?html,js,output

于 2013-09-16T12:45:20.350 に答える
3

私はjQuery Validateで多くの成功を収めました:

App.MyView = Ember.View.extend({
    templateName: 'my-form-template',
    didInsertElement: function(){
        $("#myForm").validate({
            rules:{
                fname:{
                    required: true,
                    maxlength: 50,
                },
                lname:{
                    required: true,
                    maxlength: 50,
                },
                email: {
                    required: true,
                    email: true,
                    maxlength: 200,
                },
            },
            messages: {
                email: { 
                    email: "Enter a valid email address.",
                },
            },
        });
    }
});

Ember 入力ヘルパーを使用するだけで、フォームの検証が非常にきれいになりました。jQuery Validate スクリプトを関数として .js ファイルに配置し、didInsertElement でそれを呼び出すことができます。

jQuery Validate は、ルールに関連するメッセージとともにフィールドの下にエラー メッセージを追加し、.valid() メソッドを介して任意のアクションまたはイベントから検証をトリガーすることもできます。

于 2014-06-18T14:45:07.707 に答える
2

フォーカス アウト時に検証エラーを発生させる独自のテキスト フィールドを作成し、他のイベントや他のテキスト フィールドがそれらを拡張します。

App.PhoneNumberField = App.TextField.extend({
    validate: function(value) {
        var self = this.$('input');
        var id = self.attr("id");
        var e164PhoneNumber = formatE164("AU",value);
        var valid = true;
        if(self.val().trim().length == 0 ){
            valid = true;
        }else{
            valid = isValidNumber(e164PhoneNumber);
        }
        if (!valid) {
            self.trigger(Storm.invalidInputEvent(id));
            this.setErrorMessage("error","Phone Number does not look right");
        }else {
            self.trigger(Storm.validInputEvent(id));
            this.clearMessages();
        }
    },

    keyUp: function(evt) {
        if(evt.keyCode >= 37 && evt.keyCode <=40)
        {
          return;
        }
        var textValue = this.$("input").val();
        var input = this.$().find('input');
        var formattedNumber = this.formatInput(textValue);
        input.val(formattedNumber);
        this.set('data',formattedNumber);
    },

    value: function() {
        var phoneNumber = this.get('data');
        if (phoneNumber) {
            return phoneNumber;
        } else {
            return "";
        }
    }.property('data'),

    data: null,

    placeholder: function() {
        return "";
    }.property('placeholder'),

    formatInput: function(textValue){
        var formattedPhoneNumber = formatLocal("AU",textValue);
        return formattedPhoneNumber;
    }
});
于 2014-01-31T03:55:31.683 に答える
0

従来の「エラー」オブジェクトを使用してモデルの検証エラーを保存するモデル/永続化レイヤーを使用します。

変更の監視に関してはEmberが輝いているので、変更エラーオブジェクトを監視して、検証メッセージを表示する必要があるかどうかを判断します。

現在のセットアップでは、Tower.jsをフレームワークとして使用しています。これは、Emberをビューレイヤーとして使用し、強力なモデル/永続レイヤーを備えているためです。このレイヤーを使用すると、モデルレベルで検証を定義できます。モデルを永続化しようとするたびに、モデルが検証され、エラーがスローされます。私の見解では、このエラーは「理想的な」パスを中止し、ワークフローの実行を継続せず、代わりにテンプレートに検証エラーをレンダリングします。

于 2012-10-18T15:22:35.643 に答える