在模型中使用Aurelia验证

Question

这与this类似，但我们希望在模型级别定义验证逻辑，但以下内容不显示验证消息。

用户model.js（不工作）

import {transient, inject} from 'aurelia-framework'; 
 
import {ensure} from 'aurelia-validation'; 
 

 
@transient() 
 
export class UserModel { 
 
    @ensure(function(it) { it.isNotEmpty().hasLengthBetween(3,10) }) 
 
    firstName = ""; 
 
    constructor() { 
 
    this.firstName = ""; 
 
    } 
 
}

user.js的（不工作）

import {inject} from 'aurelia-framework'; 
 
import {Validation} from 'aurelia-validation'; 
 
import {UserModel} from 'models/user-model'; 
 

 
@inject(Validation, UserModel) 
 
export class User { 
 
    
 
    constructor(validation, userModel) { 
 
    this.userModel = userModel; 
 
    this.validation = validation.on(this); 
 
    } 
 
}

user.html（不工作）

<form role="form" validate.bind="validation"> 
 
    <div class="form-group"> 
 
    <label>First Name</label> 
 
    <input type="text" validate="model.firstName" value.bind="model.firstName" class="form-control" > 
 
    </div> 
 
</form>

注意，验证= “model.firstName” 在user.html，这种使确认工作用的这意味着当用户输入有效时，我看到'has-success'类被添加到form-group div中，但当它不是有效输入时，它不会显示消息。 但是，如果我取出user-model.js之外的验证逻辑并将其放在user.js中，如下所示，它工作得很好。

用户model.js（工作）

import {transient, inject} from 'aurelia-framework'; 
 

 
@transient() 
 
export class UserModel { 
 
    constructor() { 
 
    this.firstName = ""; 
 
    } 
 
}

user.js的（工作）

import {inject} from 'aurelia-framework'; 
 
import {Validation} from 'aurelia-validation'; 
 
import {UserModel} from 'models/user-model'; 
 

 
@inject(Validation, UserModel) 
 
export class User { 
 
    
 
    constructor(validation, userModel) { 
 
    this.model = userModel; 
 
    this.validation = validation.on(this) 
 
     .ensure('model.firstName') 
 
     .isNotEmpty() 
 
     .hasLengthBetween(3,10); 
 
    } 
 
}

user.html（工作）

<form role="form" validate.bind="validation"> 
 
    <div class="form-group"> 
 
    <label>First Name</label> 
 
    <input type="text" value.bind="model.firstName" class="form-control" > 
 
    </div> 
 
</form>

我们正在试图定义验证逻辑在用户模式本身，这样，当我们需要在其他UI使用它，我们有集中的位置来验证它而不是复制&将逻辑粘贴到任何地方。有可能我做错了什么，但如果有人知道如何做到这一点，任何帮助表示赞赏！

Answer 1

从奥里利亚验证文档，

随着你的ViewModels变得更加复杂，或者如果你开始使用绑定 转换器，您用来设置验证规则的结合路径 可能比结合不同您在视图中使用的路径，所以 您需要为验证自定义属性提供一些额外的线索，作为 ，哪些元素应与哪些验证规则匹配。 考虑这个更复杂的例子...

基本上，验证规则是针对firstName财产在你UserModel创建的，但对于输入元素的结合有着不同的绑定路径：value.bind="userModel.firstName"。因此，您需要在输入元素上添加一个validate="firstName"属性，以帮助确认哪些HTML元素与验证消息匹配。

这里是你如何做到这一点（with Plunkr）

用户model.js

import {transient} from 'aurelia-framework'; 
import {ensure} from 'aurelia-validation'; 

@transient() 
export class UserModel{ 
    @ensure(function(it) { it.isNotEmpty().hasLengthBetween(3,10) }) 
    firstName = ""; 

    constructor() { 
    this.firstName = ""; 
    } 
} 

user.js的

import {inject} from 'aurelia-framework'; 
import {Validation} from 'aurelia-validation'; 
import {UserModel} from 'user-model'; 

@inject(Validation, UserModel) 
export class User { 

    constructor(validation, userModel) { 
    this.userModel = userModel; 
    this.validation = validation.on(this.userModel); 
    } 

} 

user.html

<template> 
    <form role="form" validate.bind="validation"> 
    <div class="form-group"> 
     <label>First Name</label> 
     <input type="text" value.bind="userModel.firstName" validate="firstName" class="form-control"> 
    </div> 
    </form> 
</template>