为何在对象方法内调用addMethod时jQuery验证未触发？

这种情况我碰到过好多次，结合你说的「只有把代码移到对象方法外才生效」这个关键信息，核心问题大概率出在作用域、this指向或者打包压缩带来的变量混淆上，给你拆解几个最可能的原因：

1. 类方法内部的this指向错误 #

这是最常见的问题！如果你的Validation.init()方法里用了this来引用类的其他属性或方法，但事件监听用了普通函数而非箭头函数，就会导致this绑定到触发事件的DOM元素，而不是Validation实例。比如：

class Validation {
  init() {
    // 这里的this是Validation实例，没问题
    document.querySelector('form').addEventListener('submit', this.handleSubmit);
  }

  handleSubmit(e) {
    // 这里的this变成了form元素，不是Validation实例！
    // 所以你调用this.validate()之类的方法会直接报错，看起来就像验证没触发
    e.preventDefault();
    this.validate(); // 这里会失败
  }
}

解决办法：用箭头函数绑定this，或者在init里手动绑定上下文：

init() {
  // 方式1：箭头函数自动绑定this
  document.querySelector('form').addEventListener('submit', (e) => this.handleSubmit(e));
  // 方式2：用bind手动绑定
  document.querySelector('form').addEventListener('submit', this.handleSubmit.bind(this));
}

2. 打包压缩导致的内部方法/变量名混淆 #

有些打包工具（比如Terser）在压缩时会重命名类的私有方法或变量，如果你的代码里依赖了字符串形式的方法名，或者工具误判某些内部方法为「未使用代码」，就会导致压缩后找不到对应的逻辑。

比如你原本的代码：

class Validation {
  init() {
    this.setupValidationListeners(); // 压缩后setupValidationListeners可能被改成a、b这类短名
  }

  setupValidationListeners() {
    // 绑定事件的核心逻辑
  }
}

如果打包工具的静态分析出了问题，可能会把setupValidationListeners误判为未使用代码而移除，或者重命名后导致init里的调用失效。

解决办法：确保所有内部方法都被直接引用，或者在打包配置里禁用对该类的压缩，也可以用/*#__PURE__*/注释告诉工具不要移除相关方法。

3. 作用域封装导致事件监听未正确注册 #

如果你的打包工具把代码包裹在IIFE（立即执行函数表达式）里，而你的Validation类方法里依赖了全局变量（比如直接用$却没正确引入jQuery），或者闭包内的变量被隔离，也会导致逻辑无法执行。比如：

class Validation {
  init() {
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
      form.addEventListener('submit', function() {
        // 这里的闭包如果依赖类内部变量，可能因为打包后的作用域隔离无法访问
        this.checkFormValidity(form); // 同样会出现this指向错误
      });
    });
  }
}

本质还是this指向或作用域隔离的问题，和第一个原因类似。

快速排查步骤 #

1. 先打开浏览器控制台，看看有没有隐藏的报错（很多时候验证没触发是因为控制台有错误，但你没注意到）；
2. 在Validation.init()和验证逻辑的关键位置加console.log，确认哪些代码执行了，哪些没执行；
3. 在方法内部加console.log(this)，检查this是不是你预期的Validation实例。

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