Проверка поля onBlur с Aurelia

Question

Я использую Aurelia и TypScript для создания веб-страницы. У меня простая форма входа в систему, и я бы хотел проверить электронную почту и пароль пользователя.

Я использую проверку Aurelia и по умолчанию проверяет содержимое моего ввода каждый раз, когда он изменяется, что может раздражать. (например: получение сообщения об ошибке, указывающее, что письмо недействительно, когда вы даже не набрали его). Поэтому я бы хотел сделать валидацию onBlur вместо этого (когда фокус на входе теряется), и когда пользователь нажимает кнопку 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 docs on validation (в разделе Подтвердить поведение привязки).

Из документов;

При проверке связывания поведение подчиняется validateTrigger (размытие, изменение, changeOrBlur, руководство) связанный с ним контроллера. Если вы хотите использовать различные validateTrigger в частности обязательного использовании одного из следующего связывающего поведения вместо & Validate:

& validateOnBlur: событие DOM размытости запускает проверку.
& validateOnChange: ввод данных, который изменяет проверку триггеров модели.
& validateOnChangeOrBlur: DOM размытие или проверка триггеров ввода данных.
& validateManual: привязка не проверяется автоматически, когда связанный элемент размыт или изменен пользователем .