Aurelia项目中值变更后验证规则未触发的问题

我之前也碰到过类似的坑，这大概率是Aurelia验证控制器的缓存机制在搞鬼！当你首次验证通过后直接把setEmail设为空字符串，验证系统可能还保留着之前的"验证通过"状态，没有自动触发新一轮验证。下面给你几个可行的解决方案：

1. 手动重置验证控制器的状态 #

首先确保你在ViewModel里注入了ValidationController，然后在重置邮箱输入的同时，调用控制器的reset方法清除对应属性的验证缓存：

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

@inject(ValidationController)
export class YourModalViewModel {
  setEmail = '';

  constructor(private validationController: ValidationController) {
    // 定义验证规则
    ValidationRules
      .ensure('setEmail')
      .required()
      .email()
      .withMessage('Email is invalid or required')
      .on(this);
  }

  async handleAddEmail() {
    // 先验证当前输入
    const validationResult = await this.validationController.validate({ propertyName: 'setEmail' });
    
    if (validationResult.valid) {
      // 这里执行你的邮箱添加逻辑
      console.log('添加邮箱:', this.setEmail);

      // 重置输入框
      this.setEmail = '';
      // 关键：清除该属性的验证缓存，让下次输入重新触发验证
      this.validationController.reset({ propertyName: 'setEmail' });
    }
  }
}

2. 重置后主动触发一次验证 #

如果你希望重置后立即显示"必填"的提示（而不是等用户输入时才触发），可以在重置后主动调用validate方法：

// 重置输入后
this.setEmail = '';
// 主动触发验证
await this.validationController.validate({ propertyName: 'setEmail' });

3. 检查视图绑定是否正确 #

确保你的输入框绑定了& validate行为，这样Aurelia才能实时监听输入变化并触发验证：

<div class="modal-body">
  <div class="form-group">
    <label for="emailInput">Email Address</label>
    <input 
      type="email" 
      id="emailInput" 
      class="form-control"
      value.bind="setEmail & validate" 
      placeholder="Enter your email"
    >
    <!-- 显示验证错误 -->
    <div class="text-danger mt-1" if.bind="validationController.errors.find(e => e.propertyName === 'setEmail')">
      ${validationController.errors.find(e => e.propertyName === 'setEmail').message}
    </div>
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary" click.delegate="handleAddEmail()">Add Email</button>
</div>

4. 监听模态框显示事件重置验证 #

如果你的模态框是复用的（比如多次打开关闭），可以监听Bootstrap的shown.bs.modal事件，每次弹窗显示时重置验证状态：

import { inject, bindable, bindingMode } from 'aurelia-framework';
import { ValidationController, ValidationRules } from 'aurelia-validation';

@inject(ValidationController)
export class EmailModal {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) setEmail = '';
  private modalElement: HTMLElement;

  constructor(private validationController: ValidationController) {
    ValidationRules
      .ensure('setEmail')
      .required()
      .email()
      .on(this);
  }

  attached() {
    // 监听模态框显示事件
    $(this.modalElement).on('shown.bs.modal', () => {
      // 每次弹窗显示时重置验证状态
      this.validationController.reset({ propertyName: 'setEmail' });
    });
  }

  detached() {
    // 销毁时移除事件监听，避免内存泄漏
    $(this.modalElement).off('shown.bs.modal');
  }
}

对应的视图里要给模态框元素绑定ref：

<div class="modal fade" ref="modalElement" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
  <!-- 模态框内容 -->
</div>

为什么会出现这个问题？ #

Aurelia的验证系统会缓存每个属性的验证结果，当你首次输入合法邮箱并验证通过后，控制器会记录这个"valid"状态。当你直接把setEmail设为空字符串时，虽然属性值发生了变化，但验证系统不会自动触发重新验证（因为它认为没有输入交互），所以需要我们手动通知验证控制器更新状态。

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