Question

我是Aurelia的新手。我想将验证传递给我的自定义元素。

验证确实有效，但它不会在屏幕上正确显示验证错误。

我有两个问题：

在提交表单之前没有验证
提交表格后。即使我正确地填写所有内容，我也总会得到一个验证错误，验证错误是“必需的”。（我拿了一个printscreen，有八个字符）

welcome.html

<template>
    <require from="./my-element"></require>
    <my-element name.bind="myName" val.bind="validation"></my-element>
</template>

welcome.js

import {Validation} from 'aurelia-validation';

export class Welcome {
  myName = 'the name';

  static inject = [Validation]
  constructor(validation) {
      this.validation = validation.on(this)
            .ensure('name')
                  .isNotEmpty()
                  .hasMinLength(3)
                  .hasMaxLength(10);
    }
}

MY-element.html

<template> 
    <form role="form" submit.delegate="save()"  validate.bind="val">
        <div class="form-group">
            <label>name</label>
            <input type="text" value.bind="name"><br/>
        </div>
        <button type="submit">Save</button>
    </form>
</template>

MY-element.js

import {bindable} from 'aurelia-framework';

export class MyElement{
    @bindable name;
    @bindable val;

    static inject = [Element];
     constructor(element){
        this.element = element;
    }

    save(){
        this.val.validate()
                .then( () => {
                    alert('correct');
                }).catch(error => {
                    alert('not correct');
                });
    }
}

Answer 1

警告

要获得验证消息，我们必须欺骗验证，认为元素模型是我们已设置验证的viewmodel。这可能不会起作用，并且可能在将来不会奏效 - 请参阅http://blog.durandal.io/2016/03/18/preparing-for-infrastructure-update/#validation

首先在 welcome.js 中将ensure('name')更改为ensure('myName')，因为这是您要验证的媒体资源的名称。

import {Validation} from 'aurelia-validation';

export class Welcome {
  myName = 'the name';
  static inject = [Validation]
  constructor(validation) {
      this.validation = validation.on(this)
            .ensure('myName')
                  .isNotEmpty()
                  .hasMinLength(3)
                  .hasMaxLength(10);
    }
}

其次，在 welcome.html 中设置从name.bind='myName'到my-name.two-way='myName'的绑定。这将确保在验证之前使用当前值更新视图模型。

<template>
    <require from="./my-element"></require>
    <my-element my-name.two-way="myName" val.bind="validation"></my-element>
</template>

第三，在 my-element.js 中将您的绑定从name更改为myName

import {bindable} from 'aurelia-framework';

export class MyElement{
    @bindable myName;
    @bindable val;

    static inject = [Element];
     constructor(element){
        this.element = element;
    }

    save(){
        this.val.validate()
                .then( () => {
                    alert('correct');
                }).catch(error => {
                    alert('not correct');
                });
    }
}

最后相应更新my-element.html

<template> 
    <form role="form" submit.delegate="save()"  validate.bind="val">
        <div class="form-group">
            <label>name</label>
            <input type="text" value.bind="myName"><br/>
        </div>
        <button type="submit">Save</button>
    </form>
</template>

aurelia-validation：验证错误未正确显示

1 个答案: