奥雷利亚ValidationRules没有触发

Question

我对Aurelia很陌生，我需要对登录表单(必需和emial)属性进行验证。这里我使用了aurelia-validation插件。我下面的代码，login.js

import {Router} from 'aurelia-router';
import {
    ValidationRules
} from 'aurelia-validation';

export class login{
    static inject() { return [Router]; }
    attached(){
    }
}
ValidationRules
    .ensure('login.emial').required()
    .withMessage(`\${$displayName} cannot be blank.`);
 `

我不知道如何触发这个并显示错误消息。

main.js

    import $ from 'jquery';
export function configure(aurelia) {
aurelia.use
    .defaultBindingLanguage()
    .defaultResources()
    .developmentLogging()
    .router()
    .history()
    .eventAggregator()
    .plugin("aurelia-materialize-css")
    .plugin('aurelia-validation')
;
aurelia.start().then(() => aurelia.setRoot());

}

<input id="email" type="email" class="validate" value.bind="login.emial">

Answer 1

login.js

import {ValidationRules} from 'aurelia-validation';

export class Login{
  email = '';
}

ValidationRules
  .ensure('email').required();

login.html

<template>
  <input value.bind="email & validate">
</template>

• https://gist.run/?id=381fdb1a4b0865a4c25026187db865ce
• https://gist.run/?id=1d612b3ae341c7e9c12113e1771988e7

Answer 2

根据上面的Jeremy 答案，您必须并且应该在输入字段的顶部提供窗体组类，如下面的代码。那么，只有验证才能正常工作，否则就无法工作。

<div class="form-group">
      <input value.bind="email & validate">
 </div>