Aurelia：在制表符上触发验证（模糊事件）答案

【问题标题】：Aurelia: Trigger Validation on tab-out(blur event)Aurelia：在制表符上触发验证（模糊事件）
【发布时间】：2016-06-06 08:53:34
【问题描述】：

我返回了一个验证组来验证我在提交按钮上触发的输入，我想通过模糊事件的验证来触发相应的验证，而不是全部。

例如：

HTML：

<form role="form" submit.delegate="welcome()" validate.bind="validation">
    <div class="form-group">
        <label for="fn">First Name</label>
        <input type="text" value.bind="firstName & updateTrigger:'blur'" class="form-control" id="fn" placeholder="first name" />
        <span>${firstName}</span>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

ViewModel 中的验证规则：

this.validation = validation.on(this)
        .ensure('firstName')
        .isNotEmpty()
        .hasMinLength(3)
        .hasMaxLength(10);

自从我写了updateTrigger:'blur' 之后，没有任何验证被触发。

删除 updateTrigger:'blur' 后，所有验证都会按预期进行。

要求：

我希望一旦输入框失去焦点（触发模糊），然后触发与“名字”相关的验证，而不触发其他验证（其他属性）。

提前致谢。

【问题讨论】：

在aurelia-validation + aurelia-validatejs 的下一个版本中将支持此功能。版本应该会在接下来的几天内发布。
@JeremyDanyow 有什么更新吗？我已经用最新的 jspm_packages 更新了框架。还是不行，发布完成了吗？
本周二（明天）拍摄。
@JeremyDanyow 谢谢伙计。

标签： javascript aurelia

【解决方案1】：

aurelia-validation alpha 现在支持此功能。查看这篇博文：https://www.danyow.net/aurelia-validation-alpha/

这是一个例子：https://gist.run?id=381fdb1a4b0865a4c25026187db865ce

registration-form.html

<template>
  <require from="./validation-summary.html"></require>

  <h1>Register!</h1>

  <form submit.delegate="submit()"
        validation-renderer="bootstrap-form"
        validation-errors.bind="errors">

    <validation-summary errors.bind="errors"
                        autofocus.bind="controller.validateTrigger === 'manual'">
    </validation-summary>

    <div class="form-group">
      <label class="control-label" for="first">First Name</label>
      <input type="text" class="form-control" id="first" placeholder="First Name"
             value.bind="firstName & validate">
    </div>

    <div class="form-group">
      <label class="control-label" for="last">Last Name</label>
      <input type="text" class="form-control" id="last" placeholder="Last Name"
             value.bind="lastName & validate">
    </div>

    <div class="form-group">
      <label class="control-label" for="email">Email</label>
      <input type="email" class="form-control" id="email" placeholder="Email"
             value.bind="email & validate">
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="button" class="btn btn-default" click.delegate="reset()">Reset</button>
  </form>
</template>

registration-form.js

import {inject, NewInstance} from 'aurelia-dependency-injection';
import {ValidationController, validateTrigger} from 'aurelia-validation';
import {required, email, ValidationRules} from 'aurelia-validatejs';

@inject(NewInstance.of(ValidationController))
export class RegistrationForm {
  @required
  firstName = '';

  @required
  lastName = '';

  @required
  @email
  email = '';

  constructor(controller) {
    this.controller = controller;

    // the default mode is validateTrigger.blur but 
    // you can change it:
    // controller.validateTrigger = validateTrigger.manual;
    // controller.validateTrigger = validateTrigger.change;
  }

  submit() {
    let errors = this.controller.validate();
    // todo: call server...
  }

  reset() {
    this.firstName = '';
    this.lastName = '';
    this.email = '';
    this.controller.reset();
  }
}

【讨论】：

谢谢，我会在几天内检查并通知您。
感谢哥们它的工作。我还有一个小问题，我需要在模糊和打字时进行验证。你能建议我应该如何实现它吗？
@Ankur，查看我刚刚使用changeOrBlur validateTrigger 选项添加的解决方案。所有功劳归于 Jeremy Danyow，因为他是实施它的人。

【解决方案2】：

Aurelia 的验证在 2016 年底更新，包括 changeOrBlur validateTrigger 选项，我认为这应该是新的默认设置。使用方法如下：

constructor(controller) {
  this.controller = controller;
  controller.validateTrigger = validateTrigger.changeOrBlur;

    // controller.validateTrigger = validateTrigger.blur; (default)
    // controller.validateTrigger = validateTrigger.change;
    // controller.validateTrigger = validateTrigger.changeOrBlur;
    // controller.validateTrigger = validateTrigger.manual;
}

【讨论】：