如何在 Vue 中验证表单？

Question

I want to build register form in Vue.

I think I did everything okay by the book. But my question is how to trigger the validation if I using v-form from Vuetify and vue-property-decorator .

Because all the examples they have this.$refs.form.validate() ... For this form it's not working.

So, how to trigger the validation when I submit the form?

This is my code:

<template>

  <v-container fluid fill-height>
    <v-layout align-center justify-center>
      <v-flex xs12 sm8 md6>

        <v-container>
          <v-card>
            <v-toolbar dark color="primary">
              <v-toolbar-title>Register</v-toolbar-title>
            </v-toolbar>
            <v-card-text>

              <v-form v-model="loginValid">

                <v-text-field v-model="form.name.value" prepend-icon="person" name="Name" label="Name" required></v-text-field>
                <v-text-field v-model="form.email.value" :rules="form.email.rule" label="Email" required type="email" prepend-icon="person"></v-text-field>
                <v-text-field prepend-icon="lock" v-model="form.password.value" :rules="form.password.rule" label="Password" type="password" required></v-text-field>
              </v-form>
            </v-card-text>
            <v-card-actions class="pa-3">
              <v-spacer></v-spacer>
              <v-btn ref="btn-entrar" id="btn-entrar" color="primary" @click="submit">Register</v-btn>

              <router-link to="/login" class="btn btn-link">Login</router-link>
            </v-card-actions>

          </v-card>

        </v-container>
      </v-flex>
    </v-layout>
  </v-container>

</template>

<script lang="ts">
import { Component, Watch, Prop } from 'vue-property-decorator';
import BaseComponent from '@/modules/common/components/baseComponent.vue';
import { State, Action, Getter } from 'vuex-class';

@Component({})
export default class RegisterPage extends BaseComponent {
  public loginValid: boolean = false;

  public form = {
    name: { value: '' },
    email: {
      value: '',
      rule: [
        (v: string) => !!v || 'Email is required',
        (v: string) => /.+@.+/.test(v) || 'E-mail must be valid'
      ]
    },
    password: {
      value: '',
      rule: [
        (v: string) => !!v || 'Password is required',
        (v: string) => v.length >= 8 || ''
      ]
    }
  };

  public name: string = '';
  public email: string = '';
  public password: string = '';

  constructor() {
    super();
  }

  public submit() {
    // i don't know if this form is valid or not :(
      console.log('in submit');
  }
}
</script>

Answer 1

I have not used Typescript, but ultimately, you'll have to validate each model onSubmit. So, in the submit() function that you have, do preventDefault() , validate your fields and if all okay then go ahead actually do submit the form to the backend.

Do read the guide for general workflow: https://v2.vuejs.org/v2/cookbook/form-validation.html

Also, do check out Vuelidate and VeeValidate which are simple validation frameworks for VueJS.

ps: see: using Vuelidate with Typescript issue first for good pointers.