如何使用带有对象属性的 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!";
          })
        }
      );
    }
  }

这是我正在尝试做的事情（但不起作用）...我也不确定是将属性保留在 class 上还是使用属性称为 this.item，其中包含属性（这是典型的 angular 方式）：

  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：用fluentAPI'ensure'方法替换ensure装饰器，这个支持'nested'或者'complex'绑定路径如：

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：由于验证规则是特定于项目的，因此您可以在项目 class 中使用该 class 中的 @ensure 装饰器来代替。然后，您可以在检索到该项目后在您的 VM 中设置验证：this.validation = validation.on(this.item); 或者，您的服务可以在 returns 您的项目到您的 VM 时设置验证并使其成为型号：item.validation = validation.on(item);

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

Answer 2

使用验证器的 .on 方法将您的规则应用于对象属性。

下面的例子是在我检索到一个名为 stock 的对象后调用的，它验证了数量不为空并且只是数字。希望这有助于...

let stock = {
  name: 'some name'
  minimumQuantity: '1'
};

applyRules() {
  ValidationRules
    .ensure((m: EditStock) => m.minimumQuantity)
    .displayName("Minimum Quantity")
    .required()
    .withMessage(`${$displayName} cannot be blank.`)
    .matches( /^[0-9]*$/)
    .withMessage(`${$displayName} must be numeric only.`)       

  .on(this.stock);
}

如何使用带有对象属性的 aurelia-validate 来验证？

How to use aurelia-validate with a object properties to validate?

decorator

ecmascript-6

aurelia