如何检查表单是否有效并禁用vuejs2中的提交按钮？

data() {
  return {
    form: {
      name: '',
      email: '',
      // 其他表单字段...
    },
    formIsValid: false
  };
},

<form @submit.prevent="submitForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" v-model="form.name" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" v-model="form.email" required>

  <!-- 其他表单字段... -->

  <button type="submit" :disabled="!formIsValid">提交</button>
</form>

methods: {
  checkFormValidity() {
    this.formIsValid = this.$refs.form.checkValidity();
  },
  submitForm() {
    // 处理表单提交逻辑
  }
},

mounted() {
  this.$nextTick(() => {
    this.$refs.form.addEventListener('input', this.checkFormValidity);
  });
},
beforeDestroy() {
  this.$refs.form.removeEventListener('input', this.checkFormValidity);
}