Aurelia动态验证问题：validate方法仅返回首个错误

我明白你现在遇到的问题了——在Aurelia里做动态验证时，validate方法只返回第一个错误，而且你想基于服务器返回的JSON来动态添加所有验证规则对吧？结合你给出的HTML代码片段，我来帮你梳理下解决思路和具体实现步骤：

默认情况下，Aurelia的验证器会遇到第一个错误就停止验证，这就是为什么你只能拿到第一个错误的原因。另外，要实现动态加载服务器返回的验证规则，需要手动解析JSON并将规则绑定到对应的表单字段上。

1. 配置验证器为收集所有错误 #

首先要修改验证器的默认行为，让它遍历所有规则并收集全部错误：

import { ValidationControllerFactory, ValidationRules, validateTrigger } from 'aurelia-validation';

export class YourViewModel {
  constructor(validationControllerFactory) {
    // 创建验证控制器
    this.controller = validationControllerFactory.createForCurrentScope();
    // 设置触发验证的时机（和你HTML里的validateOnChangeOrBlur对应）
    this.controller.validateTrigger = validateTrigger.changeOrBlur;
    // 关键：关闭"第一个错误即停止"的默认行为
    ValidationRules.defaultRules.stopOnFirstError = false;
  }
}

2. 解析服务器JSON动态添加验证规则 #

假设服务器返回的验证规则JSON格式如下（你可以根据实际接口调整）：

{
  "myInput1": [
    { "rule": "required", "message": "输入1不能为空" },
    { "rule": "minLength", "params": 5, "message": "输入1长度不能少于5位" }
  ],
  "myInput2": [
    { "rule": "email", "message": "请输入有效的邮箱地址" },
    { "rule": "maxLength", "params": 50, "message": "邮箱长度不能超过50位" }
  ]
}

写一个方法来解析这个JSON并绑定规则：

// 加载并绑定服务器返回的验证规则
loadValidationRules(serverValidationJson) {
  // 遍历每个字段的规则配置
  Object.entries(serverValidationJson).forEach(([propertyName, rules]) => {
    // 初始化当前字段的规则链
    let ruleChain = ValidationRules.on(this)[propertyName];

    rules.forEach(ruleConfig => {
      // 根据规则类型绑定对应的验证逻辑
      switch(ruleConfig.rule) {
        case 'required':
          ruleChain = ruleChain.required().withMessage(ruleConfig.message);
          break;
        case 'minLength':
          ruleChain = ruleChain.minLength(ruleConfig.params).withMessage(ruleConfig.message);
          break;
        case 'maxLength':
          ruleChain = ruleChain.maxLength(ruleConfig.params).withMessage(ruleConfig.message);
          break;
        case 'email':
          ruleChain = ruleChain.email().withMessage(ruleConfig.message);
          break;
        // 扩展自定义规则（比如正则验证）
        case 'regex':
          ruleChain = ruleChain.matches(new RegExp(ruleConfig.params)).withMessage(ruleConfig.message);
          break;
      }
    });

    // 将规则链应用到验证系统
    ruleChain.addRule();
    this.controller.addObject(this);
  });
}

// 在视图加载完成后获取服务器规则并绑定
async attached() {
  // 模拟从接口获取验证规则
  const serverRules = await fetch('/api/validation-rules').then(res => res.json());
  this.loadValidationRules(serverRules);
}

3. 修改validate方法收集所有错误 #

调整你的验证方法，确保能收集并展示所有字段的错误：

async validate() {
  const validationResult = await this.controller.validate();
  
  if (!validationResult.valid) {
    // 按字段分组整理所有错误
    this.fieldErrors = {};
    validationResult.errors.forEach(error => {
      if (!this.fieldErrors[error.propertyName]) {
        this.fieldErrors[error.propertyName] = [];
      }
      this.fieldErrors[error.propertyName].push(error.message);
    });

    // 将错误绑定到HTML对应的errors变量
    this.myInput1Errors = this.fieldErrors.myInput1 || [];
    this.myInput2Errors = this.fieldErrors.myInput2 || [];
  } else {
    // 验证通过后的逻辑
    alert('所有输入验证通过！');
  }
}

4. 完善HTML错误展示 #

补充你的HTML代码，把错误列表展示出来：

<div class="form-group">
  <input id="myInput1" value.bind="myInput1 & validateOnChangeOrBlur" errors.bind="myInput1Errors"/>
  <!-- 展示myInput1的所有错误 -->
  <ul if.bind="myInput1Errors.length > 0" class="error-messages">
    <li repeat.for="error of myInput1Errors">${error}</li>
  </ul>
</div>

<div class="form-group">
  <input id="myInput2" value.bind="myInput2 & validateOnChangeOrBlur" errors.bind="myInput2Errors"/>
  <!-- 展示myInput2的所有错误 -->
  <ul if.bind="myInput2Errors.length > 0" class="error-messages">
    <li repeat.for="error of myInput2Errors">${error}</li>
  </ul>
</div>

<button click.delegate='validate()'>validate</button>

• 一定要设置ValidationRules.defaultRules.stopOnFirstError = false，否则验证器还是会在第一个错误处停止。
• 动态添加规则时，要确保每个字段的规则链最后调用addRule()，并通过controller.addObject()注册到验证控制器。
• 验证结果的errors数组包含所有错误，你可以按需分组后绑定到对应的字段错误变量中。

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