Javascript 验证第一次有效，但随后无效

我不确定这里少了什么。当站点最初加载并且我尝试提交一个空表单时，验证开始，验证结果正确地指示

valid==false

。然后我尝试在站点上的任何位置再次验证，验证总是返回

valid==true

。如果我刷新浏览器，它会在第一次运行，但不会在以后运行

在初次尝试时检查my

ValidationController

实例（

this.validation

），填写绑定。在随后的尝试中，

绑定

为空

下面是如何设置验证的示例

创建.ts

import { autoinject} from "aurelia-framework";
import { ValidationController, ValidationRules } from "aurelia-validation";
import { DefaultValidationControllerFactory } from "../../lib/validation/default-validation-controller-factory";
import { Customer } from "../../lib/models/Customer";

@autoinject
export class CreateForm {
    private validation: ValidationController;

    public customer = new Customer();

    constructor(validationControllerFactory: DefaultValidationControllerFactory) {
        this.validation = validationControllerFactory.createForCurrentScope();
    }

    public attached() {
        ValidationRules
            .ensure((o: Customer) => o.firstName)
            .required()
            .ensure((o: Customer) => o.lastName)
            .required()
            .ensure((o: Customer) => o.facebookName)
            .required()
            .ensure((o: Customer) => o.state)
            .required()
            .on(this.customer);
    }

    public createCustomer() {
        this.isBusy = true;

        return this.validation
            .validate()
            .then(result => {
                if (result.valid) {
                    // ...
                }
            })
            .finally(() => {
                this.isBusy = false;
            });
    }
}

import { autoinject } from "aurelia-framework";
import { Validator, ValidationController, ValidationControllerFactory, ValidationRules } from "aurelia-validation";
import { DefaultValidationRenderer } from "./default-validation-renderer";

@autoinject
export class DefaultValidationControllerFactory {
    private validationControllerFactory: ValidationControllerFactory;
    private validationRenderer: DefaultValidationRenderer;

    constructor(validationControllerFactory: ValidationControllerFactory, validationRenderer: DefaultValidationRenderer) {
        this.validationControllerFactory = validationControllerFactory;
        this.validationRenderer = validationRenderer;
    }

    public create(validator?: Validator): ValidationController {
        let validationController = this.validationControllerFactory.create(validator);

        this.setDefaults(validationController);

        return validationController;
    }

    public createForCurrentScope(validator?: Validator): ValidationController {
        let validationController = this.validationControllerFactory.createForCurrentScope(validator);

        this.setDefaults(validationController);

        return validationController;
    }

    private setDefaults(validationController: ValidationController) {
        validationController.addRenderer(this.validationRenderer);
    }
}

import { inject } from "aurelia-dependency-injection";
import { ValidationRenderer, RenderInstruction } from "aurelia-validation";

const ValidationErrorClassName = "validation-error";

@inject(Element)
export class DefaultValidationRenderer implements ValidationRenderer {
    private boundaryElement: HTMLElement;

    constructor(boundaryElement: HTMLElement) {
        this.boundaryElement = boundaryElement;
    }

    public render(instruction: RenderInstruction) {
        for (let item of instruction.unrender) {
            for (let target of item.elements) {
                let messages = target.parentElement.getElementsByClassName(ValidationErrorClassName);

                for (let i = 0; i < messages.length; i++) {
                    let message = messages[i];

                    target.parentElement.removeChild(message);
                }
            }
        }

        for (let item of instruction.render.filter(o => !o.result.valid)) {
            for (let target of item.elements) {
                let message = target.ownerDocument.createElement("div");

                message.classList.add(ValidationErrorClassName);
                message.innerHTML = item.result.message;
                target.parentNode.insertBefore(message, target.nextSibling);
            }
        }
    }
}

create.html

<template>
    <div busy.bind="isBusy" class="form content-area">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label>First Name</label>
                            <input value.bind="customer.firstName & validate" type="text" class="form-control" />
                        </div>
                    </div>

                    <div class="col-xs-6">
                        <div class="form-group">
                            <label>Last Name</label>
                            <input value.bind="customer.lastName & validate" type="text" class="form-control" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label>Email Address</label>
                            <input value.bind="customer.emailAddress & validate" type="text" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

默认验证呈现程序.ts

import { autoinject} from "aurelia-framework";
import { ValidationController, ValidationRules } from "aurelia-validation";
import { DefaultValidationControllerFactory } from "../../lib/validation/default-validation-controller-factory";
import { Customer } from "../../lib/models/Customer";

@autoinject
export class CreateForm {
    private validation: ValidationController;

    public customer = new Customer();

    constructor(validationControllerFactory: DefaultValidationControllerFactory) {
        this.validation = validationControllerFactory.createForCurrentScope();
    }

    public attached() {
        ValidationRules
            .ensure((o: Customer) => o.firstName)
            .required()
            .ensure((o: Customer) => o.lastName)
            .required()
            .ensure((o: Customer) => o.facebookName)
            .required()
            .ensure((o: Customer) => o.state)
            .required()
            .on(this.customer);
    }

    public createCustomer() {
        this.isBusy = true;

        return this.validation
            .validate()
            .then(result => {
                if (result.valid) {
                    // ...
                }
            })
            .finally(() => {
                this.isBusy = false;
            });
    }
}

import { autoinject } from "aurelia-framework";
import { Validator, ValidationController, ValidationControllerFactory, ValidationRules } from "aurelia-validation";
import { DefaultValidationRenderer } from "./default-validation-renderer";

@autoinject
export class DefaultValidationControllerFactory {
    private validationControllerFactory: ValidationControllerFactory;
    private validationRenderer: DefaultValidationRenderer;

    constructor(validationControllerFactory: ValidationControllerFactory, validationRenderer: DefaultValidationRenderer) {
        this.validationControllerFactory = validationControllerFactory;
        this.validationRenderer = validationRenderer;
    }

    public create(validator?: Validator): ValidationController {
        let validationController = this.validationControllerFactory.create(validator);

        this.setDefaults(validationController);

        return validationController;
    }

    public createForCurrentScope(validator?: Validator): ValidationController {
        let validationController = this.validationControllerFactory.createForCurrentScope(validator);

        this.setDefaults(validationController);

        return validationController;
    }

    private setDefaults(validationController: ValidationController) {
        validationController.addRenderer(this.validationRenderer);
    }
}

import { inject } from "aurelia-dependency-injection";
import { ValidationRenderer, RenderInstruction } from "aurelia-validation";

const ValidationErrorClassName = "validation-error";

@inject(Element)
export class DefaultValidationRenderer implements ValidationRenderer {
    private boundaryElement: HTMLElement;

    constructor(boundaryElement: HTMLElement) {
        this.boundaryElement = boundaryElement;
    }

    public render(instruction: RenderInstruction) {
        for (let item of instruction.unrender) {
            for (let target of item.elements) {
                let messages = target.parentElement.getElementsByClassName(ValidationErrorClassName);

                for (let i = 0; i < messages.length; i++) {
                    let message = messages[i];

                    target.parentElement.removeChild(message);
                }
            }
        }

        for (let item of instruction.render.filter(o => !o.result.valid)) {
            for (let target of item.elements) {
                let message = target.ownerDocument.createElement("div");

                message.classList.add(ValidationErrorClassName);
                message.innerHTML = item.result.message;
                target.parentNode.insertBefore(message, target.nextSibling);
            }
        }
    }
}

从“aurelia依赖项注入”导入{inject}；
从“aurelia validation”导入{ValidationRenderer，RenderInstruction}；
const ValidationErrorClassName=“验证错误”；
@注入（元素）
导出类DefaultValidationRenderer实现ValidationRenderer{
私有边界元素：HTMLElement；
构造函数（boundaryElement:HtmleElement）{
this.boundaryElement=boundaryElement；
}
公共渲染（说明：渲染说明）{
用于（让指令项。取消通知）{
for（让item.elements成为目标）{
让messages=target.parentElement.getElementsByClassName（ValidationErrorClassName）；
for（设i=0；i！o.result.valid））{
for（让item.elements成为目标）{
让message=target.ownerDocument.createElement（“div”）；
message.classList.add（ValidationErrorClassName）；
message.innerHTML=item.result.message；
target.parentNode.insertBefore（消息，target.nextSibling）；
}
}
}
}

问题在于您的

DefaultValidationControllerFactory

。将其替换为：

export class DefaultValidationControllerFactory {

 public static get(container: Container) {
    return new DefaultValidationControllerFactory(container);
  }

  constructor(private container: Container) { }

  public create(validator?: Validator) {
    if (!validator) {
      validator = this.container.get(Validator) as Validator;
    }
    return new ValidationController(validator);
  }

  public createForCurrentScope(validator?: Validator) {
    const controller = this.create(validator);
    controller.addRenderer(new DefaultValidationRenderer());
    this.container.registerInstance(ValidationController, controller);
    return controller;
  }
}

(DefaultValidationControllerFactory as any)['protocol:aurelia:resolver'] = true;

---

问题是您的

DefaultValidationControllerFactory

。将其替换为：

export class DefaultValidationControllerFactory {

 public static get(container: Container) {
    return new DefaultValidationControllerFactory(container);
  }

  constructor(private container: Container) { }

  public create(validator?: Validator) {
    if (!validator) {
      validator = this.container.get(Validator) as Validator;
    }
    return new ValidationController(validator);
  }

  public createForCurrentScope(validator?: Validator) {
    const controller = this.create(validator);
    controller.addRenderer(new DefaultValidationRenderer());
    this.container.registerInstance(ValidationController, controller);
    return controller;
  }
}

(DefaultValidationControllerFactory as any)['protocol:aurelia:resolver'] = true;

---

谢谢你能详细说明一下吗？嗯，我不知道为什么，但你的工厂似乎一直在创建同一个实例。所以，它第一次起作用。在第二次中，您将获得相同的控制器实例，因此它不起作用。我必须查看源代码才能确切地知道为什么会发生这种情况。我的回答解决了你的问题吗？谢谢。你能详细说明一下吗？嗯，我不知道为什么，但你的工厂似乎一直在创建同一个实例。所以，它第一次起作用。在第二次中，您将获得相同的控制器实例，因此它不起作用。我必须查看源代码才能确切地知道为什么会发生这种情况。我的回答解决了你的问题吗？