Question

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

user-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>

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

user-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

来自aurelia-validation文档，

当您的视图模型变得更复杂或者您开始使用绑定时转换器，用于设置验证规则的绑定路径可能与您在视图中使用的绑定路径不同，所以您需要为验证自定义属性提供一些额外的线索哪些元素应与哪些验证规则匹配。考虑这个更复杂的例子......

基本上，验证规则是针对firstName中的UserModel属性创建的，但输入元素的绑定具有不同的绑定路径：value.bind="userModel.firstName"。因此，您需要在输入元素上添加validate="firstName"属性，以帮助 aurelia-validation 知道哪个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>

在模型

1 个答案: