默认浏览器表单验证在 Vuetify v-form 中不起作用

Question

我想利用浏览器的默认表单验证，因为我将在我的服务层处理更深入的验证。我需要的唯一验证是此示例的电子邮件和电子邮件。

我正在使用此处描述的示例但没有成功。 required 和 email 属性将被忽略。

<template>
  <v-row justify="center">
    <v-dialog v-model="visible" persistent max-width="600px">
      <v-form ref="userForm" @submit.prevent="handleSubmit">
      <v-card>
        <v-card-title>
          <span class="headline">Adding User</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12">
                <v-alert
                  v-if="error"
                  border="left"
                  colored-border
                  type="error"
                  elevation="2"
                >{{error}}</v-alert>
              </v-col>
              <v-col cols="12">
                <v-text-field label="Name" required v-model="user.name" />
              </v-col>

              <v-col cols="12">
                <v-text-field label="Email" required type="email" v-model="user.email" />
              </v-col>

              <v-col cols="12">
                <v-text-field required label="Password" type="password" v-model="user.password" />
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="onCancel">Close</v-btn>
          <v-btn color="blue darken-1" type="submit">Save</v-btn>
        </v-card-actions>
      </v-card>
      </v-form>
    </v-dialog>
  </v-row>
</template>

<script>

export default {
  name: "AddUser",
  data() {
    return {
      user: {}
    };
  },
  props: {
    error: {},
    permissions: {},
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleSubmit() {
      // This is executed on submit but no validation errors are shown

      // this.$refs.form.checkValidity() // throws an error on checkValidity not being a function
      this.$emit("onConfirmed", this.user);
    },
    onCancel() {
      this.$emit("onCancelled");
    }
  },
  created: function() {}
};
</script>

Answer 1

您必须在 vuetify 中使用规则进行验证，如 documentation 中所述

<v-text-field
   v-model="email"
   :rules="[rules.required, rules.email]"
   label="E-mail"
></v-text-field>

<script>
export default {
data () {
  return {
    email: '',
    rules: {
      required: value => !!value || 'Required.',
      email: value => {
        const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        return pattern.test(value) || 'Invalid e-mail.'
      },
    },
  }
},
</script>