是什么原因导致无法读取此表单验证器类中未定义的属性“预防默认”？[重复]

Question

我正在使用JavaScript编写一个表单验证程序类：

class FormValidator {
  constructor() {
    this.formToValidate = document.querySelector("form");
    this.submitButton = this.formToValidate.querySelector("input[type=submit]");
  }

  validateForm() {
    console.log('test');
  }

  submitForm(e) {
    e.preventDefault();
    this.validateForm();
  }

  init(e) {
    this.formToValidate.addEventListener('submit', this.submitForm(e));
  }
}

const formValidator = new FormValidator();
formValidator.init();

<form action="/" novalidate>
  <div class="form-group">
    <input type="text" name="name" class="form-control" placeholder="Your Name" value="" required />
  </div>
  <div class="form-group">
    <input type="text" name="email" class="form-control" placeholder="Your Email" value="" required />
  </div>
  <div class="form-group">
    <input type="text" name="phone" class="form-control" placeholder="Your Phone Number" value="" required />
  </div>
  <div class="form-group">
    <textarea name="message" class="form-control" placeholder="Your Message"></textarea>
  </div>
  <div class="form-group mb-0">
    <input type="submit" name="btnSubmit" class="btn btn-success btn-block" value="Send Message" />
  </div>
</form>

我得到一个未定义的错误的无法读取属性'preventDefault'，其原因我无法找到。




Answer 1

init函数中有一个未定义的参数e。只需使用：

init() {
        this.formToValidate.addEventListener('submit', this.submitForm);
      }

Answer 2

改变

init(e) {
    this.formToValidate.addEventListener('submit', this.submitForm(e));
}

到

init(e) {
    this.formToValidate.addEventListener('submit', () => this.submitForm(e));
}