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 回答
4

如果您使用引导程序，另一个完全受支持且非常合乎逻辑的选项是使用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 级别进行验证，让引导程序完成“脏”工作。对于标准验证，这将简单而轻松地完成工作。

于 2016-02-16T15:19:19.477 回答
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,输出

于 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 回答