Aurelia技术问询：ValidationController始终返回true与向导输入校验需求

嘿，我之前也踩过类似的坑！咱们一步步来排查和解决这个问题：

1. 先确认校验规则是否正确配置 #

首先得确保你的步骤ViewModel里真的加了校验装饰器，比如@required()这类。如果没加规则，控制器当然会直接返回true啦！举个例子：

// steps/step1.ts
import { required, email } from 'aurelia-validation';

export class Step1 {
  // 给需要校验的属性加上装饰器
  @required({ message: '用户名不能为空' })
  username: string;

  @email({ message: '请输入有效的邮箱地址' })
  email: string;
}

2. 校验控制器要和当前步骤的ViewModel绑定 #

你在settingsWizard里创建了valController，但调用校验时得明确指定要校验的对象——也就是当前活跃步骤的ViewModel！如果只调用valController.validate()，它可能找不到要校验的属性，直接返回true。

修改你的下一步按钮点击方法，用async/await处理异步校验：

async onNextClick() {
  // 明确指定校验当前活跃步骤的ViewModel
  const validationResult = await this.valController.validate({ 
    object: this.activeStep.viewModel 
  });

  if (validationResult.valid) {
    // 校验通过，切换到下一步
    this.wizard.next();
  } else {
    // 校验失败，提示用户或者打印错误详情
    this.log.error('输入有误，请检查');
    // 也可以遍历错误信息展示给用户
    validationResult.errors.forEach(error => {
      console.log(error.message);
    });
  }
}

3. 确保视图和控制器正确关联 #

你的步骤模板里得把表单元素和校验控制器绑定起来，不然控制器没法监听输入变化。比如在step1的模板里：

<template>
  <!-- 把校验控制器绑定到表单 -->
  <form validation-controller.bind="valController">
    <div>
      <label>用户名</label>
      <input type="text" value.bind="username & validate">
      <!-- 显示校验错误信息 -->
      <validation-errors repeat.for="error of valController.errors" class="text-danger">
        ${error.message}
      </validation-errors>
    </div>

    <div>
      <label>邮箱</label>
      <input type="email" value.bind="email & validate">
      <validation-errors repeat.for="error of valController.errors" class="text-danger">
        ${error.message}
      </validation-errors>
    </div>
  </form>
</template>

如果是父组件传递控制器给子步骤，记得在子组件里接收这个绑定属性：

// steps/step1.ts
import { bindable, ValidationController } from 'aurelia-framework';
import { required, email } from 'aurelia-validation';

export class Step1 {
  @bindable valController: ValidationController; // 接收父组件传递的控制器

  @required({ message: '用户名不能为空' })
  username: string;

  @email({ message: '请输入有效的邮箱地址' })
  email: string;
}

然后在父组件的模板里渲染步骤时，把控制器传过去：

<!-- settings-wizard.html -->
<compose 
  view-model.bind="activeStep.viewModel" 
  model.bind="{ valController: valController }"
></compose>

4. 检查Validation插件是否正确注册 #

别忘了在main.ts里注册Aurelia Validation插件，不然所有校验规则都不会生效：

// main.ts
import { Aurelia } from 'aurelia-framework';
import { ValidationConfiguration } from 'aurelia-validation';

export async function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-validation', (config: ValidationConfiguration) => {
      // 可以设置默认的校验触发方式，比如输入变化时自动校验
      config.defaultValidationTrigger = 'change';
    });

  await aurelia.start();
  await aurelia.setRoot('app');
}

5. 排查异步校验的问题 #

如果你的校验规则里有异步逻辑（比如调用接口校验用户名是否存在），得确保返回的是正确的Promise，并且在校验完成后返回布尔值或者ValidationResult。比如：

import { ValidationRule, ValidationResult } from 'aurelia-validation';

// 自定义异步校验器
export const usernameExists = (): ValidationRule => ({
  validate: async (value: string) => {
    if (!value) return true; // 空值交给required规则处理
    const response = await fetch(`/api/check-username?name=${value}`);
    const exists = await response.json();
    return !exists ? true : new ValidationResult(false, '用户名已存在');
  }
});

然后在属性上使用这个自定义校验器：

@usernameExists()
username: string;

按照这些步骤排查下来，应该就能解决校验总是返回true的问题了！

内容的提问来源于stack exchange，提问作者kalbsschnitzel