Javascript aurelia验证：验证错误未正确显示

我是奥雷莉亚的新手。我想将验证传递给我的自定义元素

验证确实有效，但它无法在屏幕上正确显示验证错误

我有两个问题：

• 在我提交表格之前没有验证
• 提交表格后。即使我正确填写了所有内容，我始终会收到一个验证错误，验证错误为“is required”。（我使用了a，共有八个字符）

欢迎光临

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

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>

---

注意事项

为了获得验证消息，我们必须欺骗验证，使其认为元素模型就是我们设置验证的viewmodel。这可能不应该起作用，将来也可能不起作用-参见

首先在welcome.js中将

sure（'name'）

更改为

sure（'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);
    }
}

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

其次，在welcome.html中，将绑定从

name.bind='myName'

设置为

my name.two-way='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);
    }
}

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

并最终相应地更新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>

名称


拯救

谢谢您的帮助。两个问题中的一个已经解决。但不幸的是，错误没有显示在屏幕上。如果名称无效，则屏幕上不会显示任何内容。对不起，是的，我在发布后意识到了这一点。我认为问题在于validation viewstrategy没有将元素识别为模型属性的控件。今晚我再去看看。

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