使用Aurelia對Blur進行現場驗證

Question

我正在使用Aurelia和Typescript來構建一個網頁。 我有一個簡單的登錄表單，我想驗證用戶的電子郵件和密碼。

我正在使用Aurelia驗證，默認情況下，它會在每次更改時驗證輸入內容，這可能很煩人。 （例如：當您甚至沒有輸入時，收到一條錯誤消息，指出該電子郵件無效）。 所以我想在Blur上進行驗證（當輸入的焦點丟失時）以及當用戶點擊Login按鈕時。

這是我的代碼：

的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調試控制台中也沒有錯誤。

有關如何做到這一點的任何想法？ 有可能嗎？

Answer 1

您可以使用不同的綁定行為來判斷驗證何時應該觸發。 您可以在Aurelia文檔中了解有關驗證的更多信息。

來自文檔;

驗證綁定行為服從關聯控制器的validateTrigger（blur，change，changeOrBlur，manual）。 如果您想在特定綁定中使用不同的validateTrigger，請使用以下綁定行為之一代替＆validate：

＆validateOnBlur：DOM模糊事件觸發驗證。
＆validateOnChange：更改模型的數據條目觸發驗證。
＆validateOnChangeOrBlur：DOM模糊或數據輸入觸發驗證。
＆validateManually：當關聯元素被用戶模糊或更改時，不會自動驗證綁定。

Answer 2

我最近遇到了這個確切的用例，我使用Aurelia的內置去抖功能解決了它。

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

600ms是一個任意值，但您可以隨時根據需要使用它。