javascript - 如何在表单提交 vueitify 中显示验证和错误消息？

Question

我正在使用此自定义表单来允许用户从中发送消息，但是我希望如果用户输入的电话或电子邮件格式不正确，然后在他们提交之前提示他们这是错误的：

请注意，我让 emailjs 完美运行，并且我的电子邮件收到了消息。问题只是验证。

我也尝试让代码片段工作，但我不确定我错过了什么。

见下面的编码：

< script >
  import emailjs from 'emailjs-com'
export default {
  name: 'HomeContact',
  username: '',
  data: () => ({
    messageWasSent: false,
    valid: false,
    username: '',

    email: '',
    rules: {
      required: value => !!value || 'Required.',
      counter: value => value.length <= 20 || 'Max 20 characters',
      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.'
      },
    },
  }),

  methods: {
    sendEmail: function() {
      const form = this.$refs.form
      emailjs.sendForm('service_', 'template_', form.$el, 'user_')
        .then((result) => {
          this.messageWasSent = true
          console.log('SUCCESS!', result.status, result.text)
        }, (error) => {
          console.log('FAILED...', error)
        })
    },
  },

} <
/script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<base-card
      color="rgba(203, 170, 92, 0.51)"
      class="pa-3 mt-12"
    >
      <v-container>
             <v-col
            cols="12"
            md="5"
          >
            <v-form

              v-if="!messageWasSent"
              ref="form"
              v-model="valid"
              @submit.prevent
            >
              <base-subheading class="mb-3">
                Get In Touch With Us:
              </base-subheading>
              <p>
                Learn Why Companies use Ink & Associatez
              </p>
              <v-row class="pa-2">
                <v-responsive
                  class="overflow-visible mr-2"
                  max-width="500"
                >
                  <v-text-field
                    v-model="username"
                    hide-details
                    label="Name"
                    solo
                    type="text"
                    name="user_name"
                    :rules="[rules.required, rules.counter]"
                    counter
                    maxlength="20"
                  />
                </v-responsive>
              </v-row>
              <v-row class="pa-2">
                <v-responsive
                  class="overflow-visible mr-2"
                  max-width="500"
                >
                  <v-text-field
                    v-model="email"
                    hide-details
                    label="Your Email Address"
                    solo
                    type="email"
                    name="user_email"
                    :rules="[rules.required, rules.email]"
                  />
                </v-responsive>
              </v-row>
              <v-row class="pa-2">
                <v-responsive
                  class="overflow-visible mr-2"
                  max-width="500"
                >
                  <v-text-field
                    hide-details
                    label="Phone Number"
                    solo
                    type="tel"
                    name="user_tel"
                  />
                </v-responsive>
              </v-row>
              <v-row class="pa-2">
                <v-responsive
                  class="overflow-visible mr-2"
                  max-width="500"
                >
                  <!---- <v-text-field
                      hide-details
                      label="Message"
                      solo
                      min-height="400"
                    /> --->
                  <v-textarea
                    solo
                    label="Message"
                    type="text"
                    name="user_message"
                  />
                </v-responsive>
              </v-row>

              <v-row class="pa-2">
                <v-btn
                  :block="$vuetify.breakpoint.xsOnly"
                  class="ma-0"
                  color="secondary"
                  style="height: 55px"
                  type="submit"
                  value="send"
                  @click.prevent="sendEmail($event)"
                >
                  Submit
                </v-btn>
              </v-row>
            </v-form>
            <div v-else>
              <v-img
                :src="require('@/assets/mail.gif')"
                class="grey lighten-2"
                width="100%"
              >
                <div class="text-center">
                  <h3>Hi {{ username }}</h3>
                </div>
                <div class="text-center">
                  <h4>Your Message Was Sent Successful</h4>
                </div>
                <div class="text-center">
                  <h5>We will get back to you moemntarily</h5>
                </div>
              </v-img>
            </div>
          </v-col>
          </v-container>