forms - 如何判断表单字段在 vue.js 中是否无效

Question

我正在开发一个 Vue 应用程序。我想知道表单字段是否处于无效状态。例如，如果该字段是必填字段，并且用户点击提交，但他们没有填写该字段，那么浏览器的验证应该触发并且该字段显示为红色并在其下方显示一条验证消息。这就是我所说的无效状态。

我可以使用 $refs 引用该字段，如下所示:

<v-text-field 
    ref="myField"
    required
    v-model="value" />

this.$refs['myField'].what?

我可以用 $refs['myField'] 做什么来告诉我它是否处于无效状态？

Answer 1

v-text-field 有两个可用于确定其验证状态的混合属性:hasError或 valid .要检查该字段是否无效，您可以这样做:

this.$refs['myField'].hasError

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      password: 'Password',
      rules: {
        required: value => !!value || 'Required.',
        min: v => v.length >= 8 || 'Min 8 characters',
      },
    }
  },
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@2.2.28/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.2.28/dist/vuetify.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

<v-app id="app">
  <v-container>
    <v-text-field
      ref="password"
      v-model="password"
      :rules="[rules.required, rules.min]"
      type="password"
      label="Password"
      hint="At least 8 characters"
      counter
    ></v-text-field>
    <pre v-if="$refs.password">
      hasError: {{$refs.password.hasError}}
      valid: {{$refs.password.valid}}
    </pre>
  </v-container>
</v-app>