如何判断 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 有两个 mixin 属性可用于确定其验证状态：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>

Answer 2

您可以在v-form 元素上使用v-model 绑定来获取表单有效状态。

如果你不能这样做，你可以将 ref 绑定到 v-form 并可能在内部访问 valid 状态

看看下面的sn-p！

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  data: () => ({
    valid: false,
    name: '',
    nameRules: [
      (v) => !!v || 'Name is required',
      (v) => v.length <= 10 || 'Name must be less than 10 characters'
    ],
  }),
  computed: {
    formState() {

      let nameValid = false;
      let errorBucket = []
      let nameInput = this.$refs.nameInput;

      if (nameInput) {
        nameValid = nameInput.valid
        errorBucket = nameInput.errorBucket
      }

      return JSON.stringify({
        valid: this.valid,
        nameValid,
        errorBucket,
        name: this.name
      });
    }
  },
  methods: {
    submit() {
      console.log(this.valid, this.name)
    }
  },
  vuetify: new Vuetify(),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>


<div id="app">
  <v-app>
    <v-content>
      <v-form v-model="valid">
        <v-container>
          <v-text-field ref="nameInput" v-model="name" :rules="nameRules" label="Name"></v-text-field>
          <v-btn :disabled="!valid" class="mr-4" @click="submit">submit</v-btn>
          <div>{{formState}}</div>
        </v-container>
      </v-form>
    </v-content>
  </v-app>
</div>