Vue3+antDesignVue實現(xiàn)表單校驗的方法
更新時間：2024年01月19日 09:43:23 作者：m87里的光
這篇文章主要為大家詳細(xì)介紹了基于Vue3和antDesignVue實現(xiàn)表單校驗的方法,文中的示例代碼講解詳細(xì),具有一定的參考價值,需要的小伙伴可以了解下
一
<a-form
ref="form"
:model="form"
:rules="rules"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<!-- <a-form-item label='創(chuàng)建人:' name='createdBy'>-->
<!-- <a-input-number v-model:value='form.createdBy' placeholder='請輸入創(chuàng)建人' allow-clear autocomplete='off' style="width: 100%" />-->
<!-- </a-form-item>-->
<a-form-item label="項目編號:" name="projectCode">
<a-input v-model:value="form.projectCode" placeholder="請輸入項目編號" style="width: 50%" allow-clear autocomplete="off" />
</a-form-item>
<a-form-item label="項目名稱:" name="projectName">
<a-input v-model:value="form.projectName" placeholder="請輸入項目名稱" style="width: 50%" allow-clear autocomplete="off" />
</a-form-item>
<a-form-item label="項目承擔(dān)單位:" name="company">
<a-input v-model:value="form.company" placeholder="請輸入項目承擔(dān)單位" style="width: 50%" allow-clear autocomplete="off" />
</a-form-item>
<a-form-item label="項目目的和意義:" name="purpose">
<a-textarea v-model:value="form.purpose" placeholder="請輸入項目目的和意義" style="width: 50%" allow-clear autocomplete="off" />
</a-form-item>
<a-form-item label="技術(shù)水平:" name="level">
<a-select
ref="select"
v-model:value="form.level"
style="width: 40%"
placeholder="請選擇技術(shù)水平"
@focus="focus"
@change="handleChange"
>
<a-select-option value="國際先進(jìn)">國際先進(jìn)</a-select-option>
<a-select-option value="國際領(lǐng)先">國際領(lǐng)先</a-select-option>
<a-select-option value="國內(nèi)先進(jìn)">國內(nèi)先進(jìn)</a-select-option>
<a-select-option value="國內(nèi)領(lǐng)先">國內(nèi)領(lǐng)先</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="項目類型:" name="projectType">
<a-select
ref="select"
v-model:value="form.projectType"
placeholder="請選擇項目類型"
style="width: 40%"
@focus="focus"
@change="handleChange"
>
<a-select-option value="產(chǎn)學(xué)研合作">產(chǎn)學(xué)研合作</a-select-option>
<a-select-option value="自主研發(fā)">自主研發(fā)</a-select-option>
<a-select-option value="其他">其他</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="項目主要內(nèi)容:" name="content">
<a-textarea v-model:value="form.content" placeholder="請輸入項目主要內(nèi)容" style="width: 50%" allow-clear autocomplete="off" />
</a-form-item>
<a-form-item label="項目前期準(zhǔn)備工作、調(diào)研計劃:" name="plan">
<a-textarea
v-model:value="form.plan"
placeholder="請輸入項目前期準(zhǔn)備工作、調(diào)研計劃"
style="width: 50%"
allow-clear
autocomplete="off"
/>
</a-form-item>
<a-form-item label="項目預(yù)計科技投入總額:" name="investment">
<a-input-number
v-model:value="form.investment"
placeholder="請輸入項目預(yù)計科技投入總額"
style="width: 50%"
allow-clear
autocomplete="off"
addon-before="RMB"
addon-after="萬元"
/>
</a-form-item>
<a-form-item label="前期準(zhǔn)備工作進(jìn)展、項目調(diào)研進(jìn)展:" name="progress">
<a-textarea
v-model:value="form.progress"
placeholder="請輸入前期準(zhǔn)備工作進(jìn)展、項目調(diào)研進(jìn)展"
style="width: 50%"
allow-clear
autocomplete="off"
/>
</a-form-item>
<a-form-item label="已累計投入總額:" name="spent">
<a-input-number
v-model:value="form.spent"
placeholder="請輸入已累計投入總額"
style="width: 50%"
allow-clear
autocomplete="off"
addon-before="RMB"
addon-after="萬元"
/>
</a-form-item>
<a-form-item label="項目調(diào)研報告（或總結(jié)）:" name="report">
<a-upload
name="file"
ref="uploadRef"
class="upload-list"
v-model:file-list="fileList"
:multiple="false"
:action="FileUploadUrl"
:headers="headers"
:before-upload="beforeUpload"
:custom-request="customRequest"
@change="handleChange"
@remove="handleRemove"
>
<a-button v-if="fileList.length < 1">
<template #icon>
<CloudUploadOutlined />
</template>
<span>選擇文件</span>
</a-button>
</a-upload>
</a-form-item>
</a-form>二
data() {
return {
fileList: [],
// 表單數(shù)據(jù)
form: Object.assign({}, this.data),
// 表單驗證規(guī)則
rules: {
createdBy: [{ required: true, message: '請輸入創(chuàng)建人', type: 'number', trigger: 'blur' }],
projectName: [{ required: true, message: '請輸入項目名稱', type: 'string', trigger: 'blur' }],
company: [{ required: true, message: '請輸入項目承擔(dān)單位', type: 'string', trigger: 'blur' }],
purpose: [{ required: true, message: '請輸入項目目的和意義', type: 'string', trigger: 'blur' }],
level: [{ required: true, message: '請輸入技術(shù)水平', type: 'string', trigger: 'blur' }],
projectType: [{ required: true, message: '請輸入項目類型', type: 'string', trigger: 'blur' }],
content: [{ required: true, message: '請輸入項目主要內(nèi)容', type: 'string', trigger: 'blur' }],
plan: [{ required: true, message: '請輸入項目前期準(zhǔn)備工作、調(diào)研計劃', type: 'string', trigger: 'blur' }],
investment: [{ required: true, message: '請輸入項目預(yù)計科技投入總額', type: 'number', trigger: 'blur' }],
postTime: [{ required: true, message: '請輸入', type: 'string', trigger: 'blur' }],
status: [{ required: true, message: '請輸入', type: 'string', trigger: 'blur' }],
progress: [{ required: true, message: '請輸入前期準(zhǔn)備工作進(jìn)展、項目調(diào)研進(jìn)展', type: 'string', trigger: 'blur' }],
report: [{ required: true, message: '請輸入項目調(diào)研報告（或總結(jié)）', type: 'change', trigger: 'blur' }],
projectCode: [{ required: true, message: '請輸入項目編號', type: 'string', trigger: 'blur' }],
spent: [{ required: true, message: '請輸入已累計投入總額', type: 'number', trigger: 'blur' }]
},
// 提交狀態(tài)
loading: false,
headers: {
Authorization: getToken()
},
// 是否是修改
isUpdate: false
};
},到此這篇關(guān)于Vue3+antDesignVue實現(xiàn)表單校驗的方法的文章就介紹到這了,更多相關(guān)Vue3 antDesignVue表單校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue proxyTable的跨域中pathRewrite配置方式
這篇文章主要介紹了vue proxyTable的跨域中pathRewrite配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在做文字處理的項目時經(jīng)常會遇到搜索文字并高亮的需求,本文就來介紹vue 指定文字高亮的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12
深入探討如何在Vue中使用EventBus實現(xiàn)組件間的高效通信
在現(xiàn)代前端開發(fā)中,Vue.js?作為一種流行的漸進(jìn)式框架,廣泛應(yīng)用于各類?Web?項目的構(gòu)建中,本文將深入探討如何在?Vue?中使用?EventBus,實現(xiàn)組件間的高效通信,需要的可以了解下2024-11-11
vite?vue3?規(guī)范化與Git?Hooks詳解
這篇文章主要介紹了vite?vue3?規(guī)范化與Git?Hooks,本文重點討論?git?提交規(guī)范,結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
基于Vue?+?Node.js自動發(fā)布服務(wù)腳本的完整流程
在當(dāng)今快節(jié)奏的軟件開發(fā)環(huán)境中,前端項目的快速迭代與高效部署成為了提升競爭力的關(guān)鍵,這篇文章主要介紹了基于Vue+Node.js自動發(fā)布服務(wù)腳本的完整流程,需要的朋友可以參考下2026-03-03
我們看到的v-開頭的行內(nèi)屬性，都是指令，不同的指令可以完成或?qū)崿F(xiàn)不同的功能，對普通 DOM元素進(jìn)行底層操作，這時候就會用到自定義指令。除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令2022-09-09
Vue版本演進(jìn)之Vue3、Vue2.7與Vue2全面詳細(xì)對比
隨著前端技術(shù)的不斷發(fā)展,各種框架應(yīng)運而生,而Vue.js憑借其簡潔、靈活的特性,成為了許多開發(fā)者的首選,這篇文章主要介紹了Vue版本演進(jìn)之Vue3、Vue2.7與Vue2全面詳細(xì)對比的相關(guān)資料,需要的朋友可以參考下2026-03-03
vue中el-tree動態(tài)初始默認(rèn)選中和全選實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中el-tree動態(tài)初始默認(rèn)選中和全選實現(xiàn)的相關(guān)資料,eltree默認(rèn)選中eltree是一種常用的樹形控件,通常用于在網(wǎng)頁上呈現(xiàn)樹形結(jié)構(gòu)的數(shù)據(jù),例如文件夾、目錄、組織結(jié)構(gòu)等,需要的朋友可以參考下2023-09-09
防抖、節(jié)流是為了在某個事件頻繁發(fā)生時,不把這個頻繁的事件內(nèi)的操作也這么頻繁的觸發(fā),這篇文章主要介紹了Vue中防抖與節(jié)流實現(xiàn)方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-03-03
最近一直在做vue項目,從網(wǎng)上搜索到的資料不太多,這篇文章主要給大家介紹了關(guān)于vue3中引入class類的寫法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05