Antd之表單校驗
阿新 • • 發佈:2022-03-25
使用Antd進行表單校驗,程式碼如下:
<template> <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" ref="newFormRef" autocomplete="off" > <a-form-item label="模板名" name="name" has-feedback :rules="[{ required: true, message: '請輸入模板名' }]"> <a-input v-model:value="formState.name" /> </a-form-item> <a-form-item :wrapper-col="{ span: 14, offset: 10 }"> <a-button type="primary" html-type="submit" @click="onSubmit">確認</a-button> </a-form-item> </a-form> </template>
即設定表單的ref值,在form-item中設定校驗規則,注意要設定form-item的name值。
然後在提交表單時根據ref值對錶單進行校驗,程式碼如下:
methods: { onSubmit(){ this.$refs.newFormRef.validate().then(() => { console.log("submit!", this.formState, toRaw(this.formState)); this.$emit("afterSavingToTemplate"); }); } }
即可。