vue3 antd项目实战——Form表单提交和校验【v-model双向绑定input输入框、form表单数据】

news2024/11/15 21:30:41

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-form
   class="form"
   name="basic"
   :model="contentFormState"
   autocomplete="off"
   >

2.绑定input输入框文本域的数据
在这里插入图片描述

<a-textarea
   v-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-form
    class="form"
    name="basic"
    :model="contentFormState"
    autocomplete="off"
    >
    <p style="font-size:16px;margin-top:24px;">
        <b>给 小朱 添加一条荣誉</b>
    </p>
    <a-form-item
        name="promotionContent"
        >
        <p>证书内容</p>
        <a-textarea
            v-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表单的重置功能~
感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/129444.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机组成原理实训报告（附电路图）

计算机组成原理实训报告（附电路图）

实训一&#xff1a;运算器组成实验 目的要求&#xff1a; 掌握FA全加器的工作原理掌握行波进位的补码加法/减法器的工作原理了解ALU运算器的工作原理 掌握FA全加器的工作原理&#xff1a; 实验步骤&#xff1a;创建一个叫做FA的电路&#xff0c;然后开始绘制。 放一个或门&a…
阅读更多...
记一次内网渗透过程学习|天磊卫士

记一次内网渗透过程学习|天磊卫士

一、靶场说明 此靶场共有3台主机 Win7为双网卡&#xff0c;桥接为模拟外网ip&#xff08;192.168.1.220&#xff09;&#xff0c;nat&#xff08;192.168.52.142&#xff09;模拟内网域环境&#xff0c;处于DMZ区域的web服务器 Win2013为内网域控成员&#xff08;nat&#xff…
阅读更多...
[综][PDPTW]A survey on pickup and delivery problems

[综][PDPTW]A survey on pickup and delivery problems

相关数据集的下载:https://www.sintef.no/projectweb/top/pdptw/100-customers/ 由于Li&Lim生成测试实例的方式&#xff0c;这些实例中的任务数量不同&#xff0c;略高于标称值。 在这里&#xff0c;您可以找到Li&Lim的PDPTW基准问题的100个任务实例的实例定义和最著名…
阅读更多...
哗啦啦疑似暴雷之后，平台老板们开始迫切寻求二清合规监管办法

哗啦啦疑似暴雷之后，平台老板们开始迫切寻求二清合规监管办法

&#xff08;图源百度后台&#xff0c;侵删&#xff09; 最近一则“哗啦啦资金链断裂 导致餐饮店无法提现”的帖子在餐饮人中疯传&#xff0c;引起了业内不小的轰动。据很多餐饮商户反馈&#xff0c;近一个多月以来&#xff0c;哗啦啦系统一直延期提现&#xff0c;网上舆论迅速…
阅读更多...
微服务门神-Gateway路由

微服务门神-Gateway路由

引言 书接上篇微服务门神-网关了解&#xff0c;讲完了解Gateway基本概念之后&#xff0c;本篇来看下Gateway路由实现 项目集成 还是延续之前例子&#xff1a;订单服务与商品服务 步骤1&#xff1a;创建一个 shop-gateway 的模块,导入相关依赖 <?xml version"1.0…
阅读更多...
2022年年度总结

2022年年度总结

目录 一&#xff0c;回望我的2022 二&#xff0c;2023目标 一&#xff0c;回望我的2022 刚刚度过我迷茫的大一生活&#xff0c;我的大二生活也已经过去了一半。说实话&#xff0c;家里就我一个大学生&#xff0c;我实在是不知道怎么去面对我的大学生活&#xff0c;或者说我…
阅读更多...
高性能web网关Openresty实践

高性能web网关Openresty实践

高性能web网关之openresty一、openresty 简介二、openresty 安装三、openresty开发实践 —— content_by_lua 阶段四、openresty开发实践 —— rewrite_by_lua 阶段五、openresty开发实践 —— body_filter_by_lua 阶段六、openresty开发实践 —— 黑名单6.1、基础版6.2、进阶版…
阅读更多...
【面试题】面试官：为什么Promise中的错误不能被try/catch？

【面试题】面试官：为什么Promise中的错误不能被try/catch？

大厂面试题分享 面试题库 前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 前言 之前我写过一篇文章&#xff0c;讨论了为什么async await中的错误可以被try catch&#xff0c;而setTimeout等api不能&#xff0c…
阅读更多...
【pandas】教程：7-调整表格数据的布局

【pandas】教程：7-调整表格数据的布局

Pandas 调整表格的布局 本节使用的数据为 data/titanic.csv&#xff0c;链接为 pandas案例和教程所使用的数据-机器学习文档类资源-CSDN文库 导入数据 import pandas as pd titanic pd.read_csv("data/titanic.csv") titanic.head()PassengerId Survived Pclas…
阅读更多...
传感器工作原理以及传感器种类详解

传感器工作原理以及传感器种类详解

随着物联网时代的到来&#xff0c;现代信息技术快速发展&#xff0c;其中包含了计算机技术、通信技术和传感器技术等&#xff0c;计算机相当于人类的大脑&#xff0c;通信技术类似人体的神经&#xff0c;而传感器就等同于人的感觉器官。从广义上说&#xff0c;传感器就是一种能…
阅读更多...
存储控制器

存储控制器

存储控制器是按照一定的时序规则对存储器的访问进行必要控制的设备&#xff0c;包括地址信号、数据信号以及各种命令信号的控制&#xff0c;使主设备(访问存储器的设备)能够根据自己的要求使用存储器上的存储资源。 存储控制器的作用主要就是进行接口的转换&#xff0c;将主设…
阅读更多...
通信原理 | 一些常用的概念记录

通信原理 | 一些常用的概念记录

这篇文章只是记录平时了解到的一些概念，并没有针对性，比较杂乱，纯粹就是当做笔记本用的，各位看官请在茶余饭后的休闲时间阅读最为合适了解到新的概念的话，会随时更新世界四大导航系统 世界上有四大卫星导航系统，它们分别是美国的GPS、俄罗斯的格洛纳斯卫星导航系统、欧盟…
阅读更多...
尚医通-SpringBoot整合MongoDB（十七）

尚医通-SpringBoot整合MongoDB（十七）

目录&#xff1a; &#xff08;1&#xff09;MongDB-SpringBoot整合-MongoTemplate操作 &#xff08;2&#xff09;MongoTemplate操作2 &#xff08;3&#xff09;MongoTemplate操作3 &#xff08;4&#xff09;MongoDB-SpringBoot整合-MongoRepository操作 &#xff08;1&a…
阅读更多...
FIIL、南卡、漫步者蓝牙耳机怎么选？国产半入耳蓝牙耳机推荐

FIIL、南卡、漫步者蓝牙耳机怎么选？国产半入耳蓝牙耳机推荐

随着 TWS耳机市场的发展&#xff0c;越来越多的手机厂商&#xff0c;新晋的品牌&#xff0c;甚至是老牌的音频品牌都加入到了 TWS耳机的行列中&#xff0c;让消费者的选择范围变得更大。当前热销的南卡小音舱、漫步者Lolli3、FIIL CC2蓝牙耳机都是目前受消费者欢迎的&#xff0…
阅读更多...
pyqt 显示图片的若干方法

pyqt 显示图片的若干方法

date: 2022-11-30 14:23 status: public title: ‘pyqt 显示图片的若干方法’ 单张图片 使用lable 显示图片 特点是最简单&#xff0c;但功能也最少。 #!/usr/bin/env python # -*- coding: utf-8 -*- import sysfrom PyQt5.QtGui import QPixmap from PyQt5.QtWidgets impor…
阅读更多...
JAVAGUI编程初识之AWT

JAVAGUI编程初识之AWT

文章目录前言一 GUI编程简介二 AWT简介2.1 组件(Component)和容器(Container)2.2 Frame2.2.1 演示1-创建一个窗口2.2.2 演示2-多个窗口的创建2.3 Panel2.3.1 演示-Panel使用三 布局管理3.1 布局管理器之FlowLayout3.1.1 FlowLayout简介3.1.2 演示-FlowLayout使用3.2 布局管理器…
阅读更多...
电子签章结构以及规范讲解

电子签章结构以及规范讲解

前言&#xff1a; 安全电子签章是通过采用PKI公钥密码技术&#xff0c;将数字图像处理技术与电子签名技术进行结合&#xff0c;以电子形式对加盖印章图像数据的电子文档进行数字签名&#xff0c;以确保文档来源的真实性以及文档的完整性&#xff0c;防止对文档未经授权的篡改&…
阅读更多...
算法训练 —— 链表（1）

算法训练 —— 链表（1）

目录 1. LeetCode203.移除链表元素 2. LeetCode21.合并两个有序链表 3. LeetCode206.翻转链表 4. LeetCode707.设计链表 1. LeetCode203.移除链表元素 移除链表元素 题解&#xff1a;通过两个指针来控制&#xff0c;cur和prev&#xff1b;cur指针去找val&#xff0c;prev…
阅读更多...
冰冰学习笔记：位图与布隆过滤器

冰冰学习笔记：位图与布隆过滤器

欢迎各位大佬光临本文章&#xff01;&#xff01;&#xff01; 还请各位大佬提出宝贵的意见&#xff0c;如发现文章错误请联系冰冰&#xff0c;冰冰一定会虚心接受&#xff0c;及时改正。 本系列文章为冰冰学习编程的学习笔记&#xff0c;如果对您也有帮助&#xff0c;还请各位…
阅读更多...
MySQL复制技术方案——半同步复制配置

MySQL复制技术方案——半同步复制配置

Google为MySQL和InnoDB设计了一个大规模补丁集以量身打造服务器和存储引擎。其中一个修补程序可用于MySQL5.0版本&#xff0c;是半同步的复制补丁。MySQL已经打上了该补丁并在MySQL5.5中发布了。 半同步复制的理念是在允许更改操作继续执行前&#xff0c;确保更改操作至少被写…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023