Emberjs и проверка

Ответ 1

https://github.com/dockyard/ember-validations может оказаться полезным. Он также подключается к Ember-easy-form

Ответ 2

Я бы расширил 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'
    })
});

Ответ 3

Еще одна полностью поддерживаемая опция и очень логичная, если вы используете загрузку, - это использовать плагин загрузки-проверки. В ember (ember-cli) это должно быть установлено с помощью беседки:

bower install --save bootstrap-validation

то в ember-cli-build вы должны импортировать зависимости:

//bootstrap-validator
  app.import('bower_components/bootstrap-validator/dist/validator.js');
  app.import('bower_components/bootstrap-validator/dist/validator.min.js');

Это решение позволяет проверять на уровне html, позволяя загрузочному блоку выполнять "грязную" работу. Для стандартных проверок это упростит работу и упростит работу.

Ответ 4

Я обрабатывал его очень похоже на @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

Ответ 5

У меня был большой успех с 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 script и поместить его в файл .js как функцию и просто вызвать это на didInsertElement.

jQuery Validate добавляет сообщения об ошибках под вашими полями с сообщением, относящимся к правилу, а также позволяет запускать проверку с любого из ваших действий или событий с помощью метода .valid().

Ответ 6

Мы создали собственные текстовые поля, которые повышают ошибки проверки при фокусировке, а другие события и другие текстовые поля расширяют их:

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;
    }
});

Ответ 7

Я бы использовал слой model/persistance, который использует обычный объект "errors" для сохранения ошибок проверки модели.

Так как Ember сияет, когда дело доходит до наблюдения за изменениями, я бы заметил изменение объекта ошибок, чтобы определить, должно ли отображаться сообщение проверки.

В моей текущей настройке я использую Tower.js как фреймворк, потому что он использует Ember как слой View и имеет сильную модель/слой сопротивления. Этот уровень позволяет мне определять валидации на уровне модели. Каждый раз, когда я пытаюсь сохранить модель, она проверяется и возникает ошибка. В моих представлениях эта ошибка прерывает "идеальный" путь и не выполняет выполнение рабочего процесса, вместо этого он отображает ошибки проверки в шаблоне.