Question

验证没有使用去抖动，我希望服务器请求等待一段时间才能在视图上完成电子邮件的输入。

 this.validation = validation.on(this)
  .ensure('email').isNotEmpty().isEmail().withMessage("email is required")
  .passes(newValue => {
      return this.webApi.EmailExists(newValue)
                 .then(res => {
                          return !res;
                 });
  }).withMessage("This Email is already registered.")

我的观点是：

 <div class="form-group fg-float fg-line">
    <input type="text" value.bind="searchFields.emailId & debounce">
    <label class="fg-label"></label> 
 </div>

Answer 1

这完全取决于您使用的aurelia-validation的版本。看起来你在返工之前使用的是一个版本。我建议你尝试以下方法，例如：版本0.6.8：

this.validation = validation.on(this)
    .ensure('email', config => {
        config.useDebounceTimeout(150);
    })
    .isNotEmpty().isEmail().withMessage("email is required")
    .passes(newValue => {
        return this.webApi.EmailExists(newValue)
            .then(res => {
                if (res.exists) {
                    reject('This Email is already registered.');
                } else {
                    accept();
                }
            });
    });

然后，您可以从视图中删除去抖动绑定行为。

但是，如果您决定更新到最新版本（1.0.0-beta.1.0.1），则可以尝试以下操作。

View-Model 应如下所示：

import {inject, NewInstance} from 'aurelia-framework';
import {ValidationController, ValidationRules, validateTrigger} from 'aurelia-validation';

@inject(ValidationController)
export class SignUp {
    constructor(validationController) {
        this.validationController = validationController;
        this.validationController.validateTrigger = validateTrigger.change;
        ValidationRules
            .ensure('email').required().email()
            .then()
            .satisfies((newValue) => {
                return new Promise((accept, reject) => {
                    this.webApi.EmailExists(newValue).then(data => {
                        if (data.exists) {
                            accept(false);
                        } else {
                            accept(true);
                        }
                    });
                });
            }).withMessage(`\${$displayName} is already taken.`)
            .on(this);
    }
}

您的查看将是：

<div class="form-group fg-float fg-line">
  <input type="text" value.bind="searchFields.emailId & validate & debounce">
  <label class="fg-label"></label> 
</div>

每次更改输入中的值时都会触发验证（因为 validateTrigger.change 。如果删除该行，将在模糊时触发验证（如果您离开该字段）

Aurelia验证没有使用去抖动

1 个答案: