Question

我已经返回了一个验证组来验证我的输入，这些输入触发了提交按钮，我希望通过验证模糊事件来触发相应的验证，而不是全部。

例如：

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'后，所有验证都可以正常运行。

要求：

我希望一旦输入框失去焦点（模糊被触发），然后验证（＆＃39; firstname＆＃39;不会触发（其他属性）的其他验证。

提前致谢。

Answer 1

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

以下是一个示例：https://gist.run?id=381fdb1a4b0865a4c25026187db865ce

<强>登记-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>

<强>登记-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();
  }
}

Answer 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;
}

Aurelia：标签输出上的触发验证（模糊事件）

2 个答案: