Question

人们如何处理客户端验证和ember？

是否有任何开箱即用的插件或处理验证的插件，或者人们只是自己动手？

Answer 1

https://github.com/dockyard/ember-validations可能有用。它还连接到Ember-easy-form

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

Answer 3

另一个完全支持的选项，如果您使用bootstrap非常合理，则使用bootstrap-validation plugin。在ember（ember-cli）中，这应该使用bower安装：

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级别进行验证，让bootstrap执行“脏”操作。工作。对于标准验证，这将使工作变得简单而轻松。

Answer 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

Answer 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脚本并将其作为函数放在.js文件中，然后在didInsertElement上调用它。

jQuery Validate使用与规则相关的消息在您的字段下添加错误消息，还允许您通过.valid（）方法触发任何操作或事件的验证。

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

Answer 7

我会使用模型/持久层，它使用传统的“错误”对象来保存模型上的验证错误。

由于Ember在观察更改时会发光，我会观察更改错误对象以确定是否应该显示验证消息。

在我目前的设置中，我使用Tower.js作为框架，因为它使用Ember作为View层，并且具有强大的模型/持久层。该层允许我在模型级别上定义验证。每次我尝试持久化模型时，都会进行验证并抛出错误。在我的视图中，此错误会中止“理想”路径，并且不会继续执行工作流，而是会在模板中呈现验证错误。

Emberjs和验证

7 个答案: