在模型中使用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>