Question

我正在玩aurelia-validatejs并能够验证页面上的简单字段。在同一页面上，我尝试初始化一个对象并将验证绑定到该对象，然后它停止工作：

user_data:IUserData = {
    Login:"",
    Id         : null,
    UserProfile: {
        UserId: null
    },
    Permissions: null
};
constructor(){
    this.reporter = ValidationEngine.getValidationReporter(this.user_data);

    // if I just use this and not user_data object,
    // it works and error message is displayed in UI

    this.validator = new Validator(this.user_data)
        // when I use this.user_data (user_data object), it does validate 
        // and I can see validation result on console, but it's not shown in UI

        .ensure('Login').required().length({minimum: 3, maximum:10});
        this.observer = this.reporter.subscribe(result => {
            console.info(result);
        });
}

有人mentioned，validatejs会查找标签，我确实拥有它，当我在this对象上初始化时它起作用但是只要我想在this.user_data属性上验证它，它只是不在UI中显示，但我可以在控制台上看到它。

<form action="" submit.delegate="createUser()">
    <div class="input-group ${user_data.Login | loginClass}">
        <label></label>
        <input placeholder="Login" type="text" class="form-control"
            keyup.delegate="validate()"  value.bind="user_data.Login & validate">
    </div>
</form>

这不起作用，但如果我清除user_data，如：

    user_data:IUserData = {
        Login:"",
        Id         : null,
        UserProfile: {
            UserId: null
        },
        Permissions: null
    };
constructor(){
        this.reporter = ValidationEngine.getValidationReporter(this);

        //if I just use this and not user_data object,
        //it works and error message is displayed in UI

        this.validator = new Validator(this)
            .ensure('Login').required().length({minimum: 3, maximum:10});
        this.observer = this.reporter.subscribe(result => {
            console.info(result);
        });
}

和

<form action="" submit.delegate="createUser()">
    <div class="input-group ${user_data.Login | loginClass}">
        <label></label>
        <input placeholder="Login" type="text" class="form-control"
            keyup.delegate="validate()"  value.bind="Login & validate">
    </div>
</form>

这适用于UI并显示。我在stackoverflow上搜索了一下并得到了一些结果similar（我的问题很相似。如果我不在对象上使用它，但是当我尝试在对象上使用它时，我在UI上有错误消息登录控制台，但不在UI中显示）

我也找到了this，但它没有多大帮助。

我发现one more也没有多大帮助。

据我所知，有很多文章可能会使这个问题显得重复，我之所以要问的是aurelia是一项非常新的技术，而且事情正在经常发生变化。

先谢谢！

Answer 1

所以我稍微挖了一下，向Gitter的开发人员询问。事实证明，它是validatejs插件中的一个错误。

最近进行了一些更改，以便在所有类上都可用，并且当完成更改时，即使我们提供不同的模型，validatejs也会在同一模型上查找validationError Reporter。

一个小的hacky解决方法是

this.__validationReporter__ = ValidationEngine
    .getValidationReporter(this.user_data);

而不是：

this.reporter = ValidationEngine.getValidationReporter(this.user_data);

我已经报告了此issue，并会在他们想出某些内容后进行更新。

现在我要用

this.__validationReporter__ = ValidationEngine
    .getValidationReporter(this.user_data);

或另外一种解决方法是降级到0.3.x，这是不太推荐的，因为可能会有一些重要的变化。

Answer 2

您使用过form-group吗？通常我们的验证问题归结为不符合库的HTML结构。

<form action="" submit.delegate="createUser()">
    <div class="form-group ${user_data.Login | loginClass}">
        <label></label>
        <input placeholder="Login" type="text" class="form-control"
            keyup.delegate="validate()"  value.bind="Login & validate">
    </div>
</form>

绑定对象

2 个答案: