使用 Aurelia 进行字段验证 onBlur答案

【问题标题】：Field validation onBlur with Aurelia使用 Aurelia 进行字段验证 onBlur
【发布时间】：2016-09-26 05:38:39
【问题描述】：

我正在使用 Aurelia 和 Typescript 来构建网页。我有一个简单的登录表单，我想验证用户电子邮件和密码。

我正在使用 Aurelia 验证，默认情况下，它会在每次更改时验证我的输入内容，这可能很烦人。（例如：收到一条错误消息，指出当您甚至没有完成输入时该电子邮件无效）。所以我想改为对 onBlur 进行验证（当失去对输入的关注时）以及当用户点击登录按钮时。

这是我的代码：

login.html

<template>
<section>
    <div class="container col-lg-12">
        <div class="col-md-4 col-md-offset-4 centered">
            <h2 t="signin_sign_in"></h2>
            <form role="form" submit.delegate="login()" validate.bind="validation">
                <br if.bind="errors" />
                <div if.bind="errors" repeat.for="error of errors" class="alert alert-danger">
                    <h4 repeat.for="message of error">${message}</h4>
                </div>
                <div class="form-group">
                    <label class="control-label" t="signin_email_address"></label>
                    <input type="text" class="form-control" value.bind="email">
                </div>
                <div class="form-group">
                    <label class="control-label" t="signin_password"></label>
                    <input type="password" class="form-control" value.bind="password">
                </div>
                <button type="submit" class="btn btn-primary" t="signin_sign_in"></button>
            </form>
        </div>
    </div>
</section>
</template>

login.ts

@autoinject()
export class Login {
  email: string;
  password: string;
  router: Router;
  application: ApplicationState;
  accountService: AccountService;
  errors;
  validation;
  i18n: I18N;

constructor(router: Router, application: ApplicationState, accountService: AccountService, validation: Validation, i18n: I18N) {
    this.router = router;
    this.application = application;
    this.accountService = accountService;
    this.i18n = i18n;
    this.errors = [];

    this.validation = validation.on(this)
        .ensure('email')
            .isNotEmpty()
            .isEmail()
        .ensure('password')
            .isNotEmpty()
            .hasLengthBetween(8, 100);
}

navigateToHome(): void {
    this.router.navigate("/welcome");
}

login(): void {
    var __this = this;
    this.validation.validate()
        .then(() => this.accountService.signin(this.email, this.password, this.rememberMe)
            .then(result => {
                // Do stuff
            })
            .catch(error => {
                // Handle error
                }
            }));
}
}

我的第一个想法是添加

& updateTrigger:'blur':'paste'

到我在 HTML 中的绑定，但它不起作用。当焦点丢失但验证停止工作时，绑定会正确更新。 Chrome调试控制台也没有错误。

知道如何做到这一点吗？有可能吗？

【问题讨论】：

标签： javascript html validation typescript aurelia

【解决方案1】：

您可以使用不同的绑定行为来判断何时触发验证。您可以在Aurelia docs on validation 中阅读有关它们的更多信息。

来自文档；

验证绑定行为遵循关联控制器的 validateTrigger（模糊，更改，changeOrBlur，手动）。如果你想在特定绑定中使用不同的 validateTrigger 使用其中一个以下绑定行为代替 & validate：

& validateOnBlur：DOM 模糊事件触发验证。
& validateOnChange：改变模型的数据输入触发验证。
& validateOnChangeOrBlur：DOM 模糊或数据输入触发验证。
& validateManually：绑定没有被验证当关联元素被模糊或更改时自动用户。

【讨论】：

【解决方案2】：

我最近遇到了这个确切的用例，我使用 Aurelia 的内置去抖动功能解决了它。

<input type="text" class="form-control" id="email" placeholder="Email" value.bind="email & validateOnChangeOrBlur & debounce:600 ">

600ms 是一个任意值，但您可以随时根据需要使用它。

【讨论】：