decorator - 如何使用 aurelia-validate 与对象属性进行验证？

Question

我正在使用 aurelia-validate，如果我使用变量，我的验证工作正常，但我需要它来验证对象而不是变量的属性:

这是有效的:

  import {Validation} from 'aurelia-validation';
  import {ensure} from 'aurelia-validation';
  import {ItemService} from './service';

  export class EditItem {
    static inject() {
      return [Validation, ItemService];
    }

    @ensure(function(it){
      it.isNotEmpty()
        .hasLengthBetween(3,10);
    })
      name = '';

    @ensure(function(it){
      it.isNotEmpty()
        .hasMinLength(10)
        .matches(/^https?:\/\/.{3,}$/) //looks like a url
        .matches(/^\S*$/); //no spaces
    })
      url = '';

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

    activate(params){
      return this.service.getItem(params.id).then(res => {
        console.log(res);
        this.name = res.content.name; //populate
        this.url = res.content.url;
      });
    }

    update() {
      this.validation.validate().then(
        () => {
          var data = {
            name: this.name,
            url: this.url
          };

          this.service.updateItem(data).then(res => {
            this.message = "Thank you!";
          })
        }
      );
    }
  }

这就是我想要做的(但不起作用)...而且我不确定将属性保留在类上还是拥有一个名为 this.item 的属性是否更好其中包含属性(这是典型的角度方式):

  import {Validation} from 'aurelia-validation';
  import {ensure} from 'aurelia-validation';
  import {ItemService} from './service';

  export class EditItem {
    static inject() {
      return [Validation, ItemService];
    }

    @ensure(function(it){
      it.isNotEmpty()
        .hasLengthBetween(3,10);
    })
      this.item.name; //no assignment here should happen 

    @ensure(function(it){
      it.isNotEmpty()
        .hasMinLength(10)
        .matches(/^https?:\/\/.{3,}$/) //looks like a url
        .matches(/^\S*$/); //no spaces
    })
      this.item.url; //no assignment?

    constructor(validation, service) {
      this.validation = validation.on(this);
      this.service = service;
      this.item = null;
    }

    activate(params){
      return this.service.getItem(params.id).then(res => {
        console.log(res);
        this.item = res.content; //populate with object from api call
      });
    }

    update() {
      this.validation.validate().then(
        () => {
          var data = {
            name: this.item.name,
            url: this.item.url
          };

          this.service.updateItem(data).then(res => {
            this.message = "Thank you!";
          })
        }
      );
    }
  }

有人可以在这里给我一些关于如何针对现有对象(用于编辑页面)使用验证器的指导吗？

Answer 1

验证适用于各种情况，但使用 @ensure 装饰器只能用于声明简单属性的规则(就像您发现的那样)。

因此...

选项a:用流畅的API“ensure”方法替换ensure装饰器，这支持“嵌套”或“复杂”绑定(bind)路径，例如:

import {Validation} from 'aurelia-validation';
import {ItemService} from './service';

export class EditItem {
static inject() {
  return [Validation, ItemService];
}

constructor(validation, service) {
  this.validation = validation.on(this)
    .ensure('item.url')
      .isNotEmpty()
      .hasMinLength(10)
      .matches(/^https?:\/\/.{3,}$/) //looks like a url
      .matches(/^\S*$/)
    .ensure('item.name')
      .isNotEmpty()
      .hasLengthBetween(3,10);
  this.service = service;
  this.item = null;
}

activate(params){
  return this.service.getItem(params.id).then(res => {
    console.log(res);
    this.item = res.content; //populate with object from api call
  });
}

update() {
  this.validation.validate().then(
    () => {
      var data = {
        name: this.item.name,
        url: this.item.url
      };

      this.service.updateItem(data).then(res => {
        this.message = "Thank you!";
      })
    }
  );
}

}

注意:您甚至可以在设置项目之前设置验证。很酷，不是吗？

选项 b:由于验证规则特定于项目，因此您可以使用该类中的 @ensure 装饰器将验证规则移动到项目类中。 然后，您可以在检索项目后在虚拟机中设置验证:this.validation = validation.on(this.item); 或者，您的服务可以在返回您的项目时设置验证。 item 到您的虚拟机并使其成为模型的固有部分:item.validation =validation.on(item);

选项 a 最简单，似乎符合您的经验。选项 b 更易于维护，因为模型的验证规则将存在于模型上，而不是 View 模型上。但是，如果您选择选项 b，you might have to adjust your HTML a bit to make sure validation hints appear .