Javascript 如何显示无效输入的错误消息？

我有一个简单的VUE3应用程序，它用除数除以一个除数，显示商和余数。它允许用户通过修改四个数字中的任意一个来执行不同的计算：

<div id="app">
<input type="text" v-model.number="dividend"> divided by <input type="text" v-model.number="divisor">
is
<input type="text" v-model.number="quotient"> remainder <input type="text" v-model.number="remainder">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
  data() { return {
    dividend: 100,
    divisor: 7
  }},
  computed: {
      quotient: {
        get: function() { return Math.floor(this.dividend / this.divisor); },
        set: function(v) { this.dividend = v * this.divisor + this.remainder; }
      },
      remainder: {
        get: function() { return this.dividend % this.divisor; },
        set: function(v) { this.dividend = this.quotient * this.divisor + v; }
      }
    }
}).mount("#app");
</script>

除以
是
余数
Vue.createApp({
data（）{return{
股息：100，
除数：7
}},
计算：{
商：{
get:function（）{return Math.floor（this.divident/this.divisior）；}，
set:function（v）{this.divident=v*this.divisior+this.rements；}
},
剩余部分：{
get:function（）{返回this.divident%this.divisior；}，
集合：函数（v）{this.divident=this.quotine*this.divisior+v；}
}
}
}).mount（“app”）；

除非您尝试输入一个大于等于除数的余数，否则此操作很好。在这种情况下，将调整余数-例如，如果除数为7，您尝试输入余数9，则2将显示为余数，商将增加1。我认为这是不直观的-其余部分应该反映输入的内容。因此，我将余数设置器更改为：

set: function(v) { if (v < this.divisor) this.dividend = this.quotient * this.divisor + v; }

set:function（v）{if（v

现在，如果输入的余数太大，则在修复余数或更改其中一个值之前，计算不会更新

---

但是，如果余数太大并且计算没有更新，我想向用户显示一条错误消息。如何实现这一点？

watch

可以

为控制状态添加一个新的道具，您可以检查输入是否有效

您的警报消息。
数据（）{
返回{
股息：100，
除数：7，
是的，
}},
观察：{
“股息”：函数（val）{
如果（你的条件）{
this.isValidInput=false；
}
},
“除数”：函数（val）{
如果（你的条件）{
this.isValidInput=false；
}
}