Javascript 如何让Aurelia验证工作?

Javascript 如何让Aurelia验证工作?,javascript,typescript,aurelia,Javascript,Typescript,Aurelia,我从 然后尝试 但是,验证不会像预期的那样在模糊上进行。即使我在控制器上调用validate,也不会设置错误 login.ts import {inject, NewInstance} from 'aurelia-dependency-injection'; import {ValidationController} from 'aurelia-validation'; import {ValidationRules} from 'aurelia-validatejs' @inject(New

我从

然后尝试

但是,验证不会像预期的那样在模糊上进行。即使我在控制器上调用validate,也不会设置错误

login.ts

import {inject, NewInstance} from 'aurelia-dependency-injection';
import {ValidationController} from 'aurelia-validation';
import {ValidationRules} from 'aurelia-validatejs'

@inject(NewInstance.of(ValidationController))
export class Login {
    email:string;
    password:string;
    controller = null;

    constructor(controller){
        this.controller = controller;
    }

    submit = () => {
        this.controller.validate().then((res) => console.log(res)).catch((e) =>console.log(e));
    };
}

ValidationRules
    .ensure('email').required()
    .on(Login);
aurelia.use
    .standardConfiguration()
    .plugin('aurelia-validation')
    .plugin('aurelia-validatejs')
    .feature('resources');
login.html

<form submit.delegate="submit()">
                <div class="form-group">
                    <label for="email" class="control-label required">Email</label>
                    <input class="form-control" value.bind="email & validate" type="email" id="email">
                </div>
                <div class="form-group">
                    <label for="password" class="control-label required">Password</label>
                    <input class="form-control" value.bind="password & validate" type="password"
                           id="password">
                </div>
                <div class="form-group">
                    <input id="remember_me" name="remember_me" type="checkbox" value="1">
                    <label for="remember_me" class="control-label">Remember me</label>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-block" type="submit">Login</button>
                </div>
            </form>
main.ts

import {inject, NewInstance} from 'aurelia-dependency-injection';
import {ValidationController} from 'aurelia-validation';
import {ValidationRules} from 'aurelia-validatejs'

@inject(NewInstance.of(ValidationController))
export class Login {
    email:string;
    password:string;
    controller = null;

    constructor(controller){
        this.controller = controller;
    }

    submit = () => {
        this.controller.validate().then((res) => console.log(res)).catch((e) =>console.log(e));
    };
}

ValidationRules
    .ensure('email').required()
    .on(Login);
aurelia.use
    .standardConfiguration()
    .plugin('aurelia-validation')
    .plugin('aurelia-validatejs')
    .feature('resources');

您需要在类内创建验证规则,可能是在
附加的
方法中,并且您希望传递
,而不是
登录
。应该是这样的:

attached(){
   ValidationRules
    .ensure('email').required()
    .on(this);
} 

从版本0.12开始,aurelia验证不再依赖于
validate.js
。看起来您仍在使用删除的依赖项中的
ValidationRules
。简单地改变

import {ValidationRules} from 'aurelia-validatejs'


顺便说一句:您可以从项目依赖项中完全删除
aurelia validatejs
validatejs

我写了一篇文章,解释了aurelia要使验证正常工作需要做的所有事情。看起来您缺少了拼图的渲染部分。如果这能澄清问题,请告诉我: