如何让Aurelia验证工作

How to get Aurelia validations work?

本文关键字:验证 工作 Aurelia      更新时间:2023-09-26

我从http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/1

开始

Then try http://blog.durandal.io/2016/06/14/new-validation-alpha-is-here/

然而,验证不会像预期的那样发生在blur上。即使我在控制器上调用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);

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>

aurelia.json

      {
        "name": "aurelia-validation",
        "path": "../node_modules/aurelia-validation/dist/amd",
        "main": "aurelia-validation"
      },
      {
        "name": "validate.js",
        "path": "../node_modules/validate.js",
        "main": "validate"
      },
      {
        "name": "aurelia-validatejs",
        "path": "../node_modules/aurelia-validatejs/dist/amd",
        "main": "aurelia-validatejs"
      },

main.ts

aurelia.use
    .standardConfiguration()
    .plugin('aurelia-validation')
    .plugin('aurelia-validatejs')
    .feature('resources');

从0.12版本开始,aurelia-validation不再依赖于validate.js。看起来你还在使用ValidationRules从一个下降的依赖。简单地改变

import {ValidationRules} from 'aurelia-validatejs'

import {ValidationRules} from 'aurelia-validation'

顺便说一下:你可以完全删除aurelia-validatejsvalidatejs从你的项目依赖

您需要在类中创建验证规则,可能在attached方法中,并且您希望传递this而不是Login。它应该看起来像这样:

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

我已经写了一篇文章,解释了为使验证正常工作需要做的所有事情。看起来你错过了拼图的渲染部分。让我知道这是否澄清了事情:

http://www.todroid.com/understanding-how-to-use-aurelias-validation-library/