vue3 ant design vue項目實戰——Form表單【v-model雙向綁定數據實現form表單數據的提交】

• 上期文章回顧【UI界面渲染】
• 場景復現（源代碼附在文章最后）
• 實現需求
• • 1.表單數據及其類型的定義
  • 2.表單及各部分數據的雙向綁定
  • 3.表單提交功能
  • 4.校驗輸入內容不為空
  • 5.不能反復提交邏輯
• 源代碼

本文依舊沿用ant design vue組件庫和ts語言🔥🔥更多內容見Ant Design Vue官方文檔

上期文章回顧【UI界面渲染】

🔥🔥 vue3 antd項目實戰——Form表單【后臺管理系統 v-model數據的雙向綁定，input輸入框、Radio單選框的嵌套使用】

場景復現（源代碼附在文章最后）

在上期文章中，我們完成了UI界面的渲染（渲染效果如下圖），本期文章將帶著大家實現form表單的一些邏輯功能，主要是表單數據的動態綁定、確認按鈕的提交功能和校驗功能。

功能需求：

• 1.表單的值需要動態綁定
• 2.點擊確認按鈕，控制臺能夠正確打印表單提交的值（提交數據后不允許再次基礎上再次提交，即使修改了也無法點擊確認按鈕進行提交）
• 4.點擊取消按鈕，表單內容能夠重置
• 5.點擊確認按鈕時，檢查表單輸入是否有為空的部分，給出相應提示

實現需求

這里我們分三個部分來完成，首先是對表單數據及其數據類型的定義，然后完成表單各個部分數據的雙向綁定，最后完成表單的提交功能（要求能在控制臺打印正確的表單數據）。

---

1.表單數據及其類型的定義

建議將所有的類型說明按功能放在根目錄下的一個文件夾中，方便今后按功能查看，優化文件結構。

我這里是新建了utils文件用于存放工具類的文件，里面新建types文件夾，專門存放數據類型的文件。
表單數據類型代碼如下：（使用時一定記得import導入該類型）

// 導出表單數據類型 export interface Formstate {certificates_content:string,certificates_select:string,confirm:number | boolean }

在vue頁面script中寫入表單數據的初始值：

// 修改榮譽檔案的內容 let contentFormState = ref<Formstate>({certificates_content:'',certificates_select:'2022年技術部年度證書',confirm:1 // 確認按鈕的屬性 })

完成數據的定義后，接下來是表單總的數據綁定，以及各部分內容數據的雙向綁定。

2.表單及各部分數據的雙向綁定

上期文章中，表單中的form-item分為三部分，分別是input輸入框文本域、radiogroup單選組合、button按鈕組合。顯然，我們需要對整個表單進行一個總的數據綁定，再對input和radiogroup進行單獨的變量綁定。（綁定內容在代碼中的位置如下圖）
1.綁定整個表單對應的數據

<a-formclass="form"name="basic":model="contentFormState"autocomplete="off">

2.綁定input輸入框文本域的數據

<a-textareav-model:value="contentFormState.certificates_content"style="width:400px;margin-left:50px"placeholder="請輸入證書內容" show-count allow-clear:maxlength="100" />

3.綁定radio單選組合的數據

<a-radio-group v-model:value="contentFormState.certificates_select" name="certificatesRadioGroup"style="margin-top:5px"><a-radio:style="radioStyle"v-for="item of certificatesOptionsValue" v-model:value="item.options" :key="item.id">{{ item.options }}</a-radio> </a-radio-group>

到現在我們已經完成了數據的雙向綁定，是不是很簡單！！主要是變量的定義和數據類型定義，v-model的使用。

3.表單提交功能

表單的提交功能應該包含在確認按鈕點擊的邏輯內，點擊確認按鈕，能在控制臺打印正確的數據

在這里我們對按鈕綁定一個點擊事件，調用確認功能的函數。

const confirmContent = () => {console.log(contentFormState.value) // 在控制臺打印表單的數據message.success("內容保存成功",5) // 文字彈窗提示 }

實現效果：

此時我們可以在控制臺查看表單的數據，和我們輸入選擇的數據一致，說明雙向綁定成功、表單數據提交成功！！

4.校驗輸入內容不為空

上述的提交邏輯顯然是可以優化的，比如添加校驗功能，在點擊確認按鈕時檢查表單數據是否有為空的情況，并給出相應的彈窗提示。

// 確認榮譽內容 const confirmContent = () => {if (contentFormState.value.certificates_content == '') {message.warning("請檢查輸入！！！")} else {console.log(contentFormState.value)message.success("內容保存成功，如需重新操作，點擊取消即可",5)contentFormState.value.confirm = !contentFormState.value.confirm} }

實現效果：

5.不能反復提交邏輯

解釋以下這個邏輯：

我們在提交這條數據后，一般是可以再次點擊確認再次提交的，但此時就會出現兩條一樣的數據，那查重篩選的功能又需要執行，所以最好是寫一個邏輯限制操作。

于是就有了這條邏輯：

當用戶輸入完數據點擊提交后，設置提交按鈕不可用，如果需要再次提交則點擊取消即可刷新頁面，進行重新編輯和提交功能。

之前我們在定義數據時新增了confirm，用于控制button的可控狀態，如果是1，那么對應可控，如果是0，則不可控。

首先，在button標簽內添加內容：

const confirmContent = () => {console.log(contentFormState.value) // 在控制臺打印表單的數據message.success("內容保存成功，如需重新操作，點擊取消即可",5) // 文字彈窗提示contentFormState.value.confirm = !contentFormState.value.confirm // 取反操作 讓按鈕不可控（無法點擊） }

下面實現，點擊取消按鈕刷新頁面，恢復到初始狀態

<a-button @click="cancelContent()">取消</a-button>

給取消按鈕綁定一個點擊事件，調用取消功能的函數

const cancelContent = () => {router.push("/files/updateHonoraryFiles") // 路徑為表單所在頁面的路由路徑message.success("取消成功！！！可新建輸入") }

具體呈現效果：

源代碼

html部分：

<a-formclass="form"name="basic":model="contentFormState"autocomplete="off"><p style="font-size:16px;margin-top:24px;"><b>給 小朱 添加一條榮譽</b></p><a-form-itemname="promotionContent"><p>證書內容</p><a-textareav-model:value="contentFormState.certificates_content"style="width:400px;margin-left:50px"placeholder="請輸入證書內容" show-count allow-clear:maxlength="100" /></a-form-item><a-form-item><p style="margin-top:-10px">選擇 <b>小朱</b> 需要綁定的證書</p><a-radio-group v-model:value="contentFormState.certificates_select" name="certificatesRadioGroup"style="margin-top:5px"><a-radio:style="radioStyle"v-for="item of certificatesOptionsValue" v-model:value="item.options" :key="item.id">{{ item.options }}</a-radio></a-radio-group></a-form-item><a-form-item class="button-box"><a-button @click="cancelContent()">取消</a-button><a-button type="primary" style="margin-left:10px"@click="confirmContent()":disabled="contentFormState.confirm == 0 ? true : false">確定</a-button></a-form-item> </a-form>

script部分：

import { ref, reactive, toRaw } from "vue" import { Router, useRouter } from "vue-router"; import { message } from "ant-design-vue"; import { optionsType,Formstate,radioStyleType } from "../../../../../utils/types/filesTableType/index" // 按路徑導入相關數據類型即可const router : Router = useRouter();// 修改榮譽檔案的內容 let contentFormState = ref<Formstate>({certificates_content:'',certificates_select:'2022年技術部年度證書',confirm:1 }) // 證書選擇框選擇項 const certificatesOptionsValue = ref<optionsType[]>([{"id":1,"options":"2022年技術部年度證書"},{"id":2,"options":"2023年技術部年度證書"},{"id":3,"options":"2024年技術部年度證書"}, ]) const handleChange = (value: string) => {// console.log(`selected ${value}`); }; // 單選框樣式 const radioStyle = reactive<radioStyleType>({display: 'flex',height: '30px',lineHeight: '30px',marginLeft:'50px', }); // 取消榮譽內容 const cancelContent = () => {router.push("/files/updateHonoraryFiles")message.success("取消成功！！！可新建輸入") }// 確認榮譽內容 const confirmContent = () => {if (contentFormState.value.certificates_content == '') {message.warning("請檢查輸入！！！")} else {console.log(contentFormState.value)message.success("內容保存成功，如需重新操作，點擊取消即可",5)contentFormState.value.confirm = !contentFormState.value.confirm// 將數據保存至總內容中} }

css部分：

.form {margin:0 auto;width: 500px;height: 450px;margin-top: 15px;background-color: #FFFFFF;border: 1px solid rgba(172, 171, 171, 0.16);border-radius: 10px;position: relative;input {width: 400px;margin-left: 50px;}p {margin-left: 50px;margin-top: 20px;font-size: 15px;margin-bottom: 10px;font-family: "微軟雅黑";}.button-box {position: absolute;bottom: -5px;left: 170px;} }

---

下期文章將介紹兩種方案來實現form表單的重置功能~ 感興趣的小伙伴可以訂閱本專欄，方便后續了解學習~ 覺得這篇文章有用的小伙伴們可以點贊?收藏?關注哦~

總結

以上是生活随笔為你收集整理的vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据，动态校验规则】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。