使用规则验证 v-form 中的 vuetify v-text-field答案

【问题标题】：Validation on a vuetify v-text-field in a v-form using rules使用规则验证 v-form 中的 vuetify v-text-field
【发布时间】：2021-09-08 13:57:41
【问题描述】：

我是 vue 新手，我正在尝试让验证在 v-text-field 上工作。我有三个字段，2 个可编辑，一个不可编辑，一个不可编辑的字段是从另外两个计算出来的，但只有当它们有效时。所以我定义了三个字段（已将所有内容简化为 A、B 和 C 以使其清楚）：

<v-form ref="stif-form">
      <v-row class="ma-4 mt-10 material-input">
        <v-text-field ref="a" sm v-model="A" label="A" dense suffix="kPa" :rules="[...floatRules,positiveRule]" />
      </v-row>
      <v-row class="ma-4 mt-10 material-input">
        <v-text-field ref="b" sm v-model="B" dense :rules="[...floatRules, positiveRule]"/>
      </v-row>
      <v-row class="ma-4 mt-10 material-input">
        <v-text-field sm v-model="C" label="C" disabled dense  />
      </v-row>
   </v-form>

然后我有 3 个属性，A、B、C、两个手表（使用打字稿所以这是带有装饰器的，但这些相当于 js 手表）

 @Watch('A')
  onAChanged (a: number) {
    this.setC(a, this.B)
  }

@Watch('B')
   onBChanged (b: number) {
     this.setC(this.A, b)
   }

然后在 setC 中，我想通过查找这些字段并查看它们是否有效来确定 A 和 B 是否有效（而不是必须编写重复的代码来进行验证）。我试过这个：

setC (a : number, b: number) {
    if (!(this.$refs['a'] as HTMLFormElement).hasError && 
        !(this.$refs['b'] as HTMLFormElement).hasError){
      this.C= (a+b).toFixed(2)
    }
    else this.C= ''
  }

hasError 行可以正常工作并返回 true 和 false，只是他的 hasError 状态是针对上一次按键的，这意味着如果您键入无效字符，则必须在将 C 设置为空白之前键入另一个字符。我觉得我在这里错过了一些东西。正确的方法是什么？

【问题讨论】：

标签： typescript vue.js validation vuetify.js

【解决方案1】：

我有自己回答问题的习惯:)

验证由表单执行，因此通过执行以下操作，我可以获得最新的验证：

setC (a : number, b: number) {
    if ((this.$refs['stif-form'] as HTMLFormElement).validate()){
      ...
    }
    else this.C= ''
  }

【讨论】：