Vuetify——form表单验证

<v-form class="pa-4" v-model="valid" ref="form">
    <v-row no-gutters dense>
      <v-col cols="3" class="mt-2">
        <v-subheader
          ><span class="red--text">*</span>
          {
    
    {
    
     $t("account.label.login_name") }}</v-subheader
        >
      </v-col>
      <v-col cols="9">
        <v-text-field
        v-model="defaultVal"
        placeholder="无默认值"
        :append-icon="defaultVal ? 'mdi-close-circle' : null"
        @click:append="clearDefaultVal"
        required
        :rules="rules.isFull"
        rows="1"
        class="loginname"
      ></v-text-field>
      </v-col>
    </v-row>
    <v-row>
       <v-col cols="12" class="text-center">
         <v-btn elevation="4" medium color="primary" @click="submit">
           {
    
    {
    
     displayType === "CREATE" ? "新建" : "修改" }}</v-btn
         >
       </v-col>
     </v-row>
 </v-form>	


export default {
    
    
  data() {
    
    
    return {
    
    
    	form: {
    
    },
    	rules: {
    
    
	        isFull: [v => !!v || "此项为必填项"]
	      }
    }
  },
  methods:{
    
    
		submit() {
    
    
	      if (this.$refs.form.validate()) {
    
    
	        this.displayType === "CREATE" ? this.toCreate() : this.toEdit();
	      }
	    },
		toCreate(){
    
    
		},
		toEdit(){
    
    
		},
	}
}