Vuetify——form表单验证

最新推荐文章于 2024-07-27 23:30:00 发布

原创最新推荐文章于 2024-07-27 23:30:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

这是一个关于Vuetify框架中表单验证和提交操作的示例。代码展示了一个包含必填登录名字段的表单，使用了Vuetify的`v-text-field`组件进行输入，并通过`v-model`和`rules`属性实现验证。点击按钮后，根据`displayType`判断是创建还是编辑操作，并调用相应的方法`toCreate`或`toEdit`。

<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(){
		},
	}
}