Vue3+antDesignVue实现表单校验

<a-formref="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='创建人:' name='createdBy'>--><!--        <a-input-number v-model:value='form.createdBy' placeholder='请输入创建人' 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="项目承担单位:" name="company"><a-input v-model:value="form.company" placeholder="请输入项目承担单位" 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="技术水平:" name="level"><a-selectref="select"v-model:value="form.level"style="width: 40%"placeholder="请选择技术水平"@focus="focus"@change="handleChange"><a-select-option value="国际先进">国际先进</a-select-option><a-select-option value="国际领先">国际领先</a-select-option><a-select-option value="国内先进">国内先进</a-select-option><a-select-option value="国内领先">国内领先</a-select-option></a-select></a-form-item><a-form-item label="项目类型:" name="projectType"><a-selectref="select"v-model:value="form.projectType"placeholder="请选择项目类型"style="width: 40%"@focus="focus"@change="handleChange"><a-select-option value="产学研合作">产学研合作</a-select-option><a-select-option value="自主研发">自主研发</a-select-option><a-select-option value="其他">其他</a-select-option></a-select></a-form-item><a-form-item label="项目主要内容:" name="content"><a-textarea v-model:value="form.content" placeholder="请输入项目主要内容" style="width: 50%" allow-clear autocomplete="off" /></a-form-item><a-form-item label="项目前期准备工作、调研计划:" name="plan"><a-textareav-model:value="form.plan"placeholder="请输入项目前期准备工作、调研计划"style="width: 50%"allow-clearautocomplete="off"/></a-form-item><a-form-item label="项目预计科技投入总额:" name="investment"><a-input-numberv-model:value="form.investment"placeholder="请输入项目预计科技投入总额"style="width: 50%"allow-clearautocomplete="off"addon-before="RMB"addon-after="万元"/></a-form-item><a-form-item label="前期准备工作进展、项目调研进展:" name="progress"><a-textareav-model:value="form.progress"placeholder="请输入前期准备工作进展、项目调研进展"style="width: 50%"allow-clearautocomplete="off"/></a-form-item><a-form-item label="已累计投入总额:" name="spent"><a-input-numberv-model:value="form.spent"placeholder="请输入已累计投入总额"style="width: 50%"allow-clearautocomplete="off"addon-before="RMB"addon-after="万元"/></a-form-item><a-form-item label="项目调研报告(或总结):" name="report"><a-uploadname="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: [],// 表单数据form: Object.assign({}, this.data),// 表单验证规则rules: {createdBy: [{ required: true, message: '请输入创建人', type: 'number', trigger: 'blur' }],projectName: [{ required: true, message: '请输入项目名称', type: 'string', trigger: 'blur' }],company: [{ required: true, message: '请输入项目承担单位', type: 'string', trigger: 'blur' }],purpose: [{ required: true, message: '请输入项目目的和意义', type: 'string', trigger: 'blur' }],level: [{ required: true, message: '请输入技术水平', type: 'string', trigger: 'blur' }],projectType: [{ required: true, message: '请输入项目类型', type: 'string', trigger: 'blur' }],content: [{ required: true, message: '请输入项目主要内容', type: 'string', trigger: 'blur' }],plan: [{ required: true, message: '请输入项目前期准备工作、调研计划', type: 'string', trigger: 'blur' }],investment: [{ required: true, message: '请输入项目预计科技投入总额', type: 'number', trigger: 'blur' }],postTime: [{ required: true, message: '请输入', type: 'string', trigger: 'blur' }],status: [{ required: true, message: '请输入', type: 'string', trigger: 'blur' }],progress: [{ required: true, message: '请输入前期准备工作进展、项目调研进展', type: 'string', trigger: 'blur' }],report: [{ required: true, message: '请输入项目调研报告(或总结)', type: 'change', trigger: 'blur' }],projectCode: [{ required: true, message: '请输入项目编号', type: 'string', trigger: 'blur' }],spent: [{ required: true, message: '请输入已累计投入总额', type: 'number', trigger: 'blur' }]},// 提交状态loading: false,headers: {Authorization: getToken()},// 是否是修改isUpdate: false};},

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL进阶45讲【2】日志系统:一条SQL更新语句是如何执行的?

1 前言 上篇文章我们系统了解了一个查询语句的执行流程&#xff0c;并介绍了执行过程中涉及的处理模块。相信大家还记得&#xff0c;一条查询语句的执行过程一般是经过连接器、分析器、优化器、执行器等功能模块&#xff0c;最后到达存储引擎。 那么&#xff0c;一条更新语句…

最新使用宝塔反代openai官方API接口搭建详细教程及502 Bad Gateway错误问题解决

一、前言 宝塔反代openai官方API接口详细教程&#xff0c;实现国内使用ChatGPT502 Bad Gateway问题解决&#xff0c; 此方法最简单快捷&#xff0c;没有复杂步骤&#xff0c;不容易出错&#xff0c;即最简单&#xff0c;零代码、零部署的方法。 二、实现前提 一台海外VPS服务…

vite打包相关+本地http-server运行打包dist文件进行检测

目录 一.去到vite.config.ts文件 1.添加内容 2.解释 3.打包 二.本地开启http-server服务 1.全局安装http-server 1.1可以通过如下命令查看是否安装http-server 1.2使用如下命令安装 2.进入项目启动服务 3.查看效果 一.去到vite.config.ts文件 1.添加内容 build: {o…

浪之潮科技:动力恢复清积碳,尾气治理三元催化修复

针对汽车出现油耗增加、动力减弱以及尾气检测不合格等情况&#xff0c;深圳市浪之潮科技有限公司&#xff08;以下简称&#xff1a;浪之潮科技&#xff09;求真务实、勇于创新&#xff0c;独创两大系统六大部位——动力恢复清积碳、尾气治理三元催化修复&#xff0c;为广大车主…

【iOS】数据持久化(四)之FMDB基本使用

正如我们前面所看到的&#xff0c;原生SQLite API在使用时还是比较麻烦的&#xff0c;于是&#xff0c;开源社区就出现了一系列将SQLite API进行封装的库&#xff0c;其中FMDB的被大多数人所使用 FMDB和SQLite相比较&#xff0c;SQLite比较原始&#xff0c;操作比较复杂&#…

swagger标签说明

x-ref-external可以为yaml里的数据结构指定一个已有的数据类&#xff0c;例如&#xff1a; PageVO:x-ref-external: com.lee.PageVOproperties:totalRows:type: stringdescription: 总条数curPage:type: stringdescription: 当前页pageSize:type: stringdescription: 页大小指…

进程切换和是Linux2.6内核中进程调度的算法

正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 进程切换 进程并发就需要做到进程切换&#xff0c;一个CPU一套寄存器但是需要运行的进程有很多…

基于cy7c68013的逻辑分析仪nanoDLA全套软件linux下编译测试

0. 环境 - win10 - ubuntu22 - nanoDLA 提前获取到源码&#xff1a;-> 浏览器打开 https://github.com/wuxx/nanoDLA -> Download as zip. 硬件就直接用taobao买到的&#xff0c;原理图是 1. win10出厂测试 1.1 安装pulseview nanoDLA-master\software\pulseview-0.4.…

014集:python访问互联网:网络爬虫实例—python基础入门实例

以pycharm环境为例&#xff1a; 首先需要安装各种库(urllib&#xff1a;requests&#xff1a;Openssl-python等) python爬虫中需要用到的库&#xff0c;大致可分为&#xff1a;1、实现 HTTP 请求操作的请求库&#xff1b;2、从网页中提取信息的解析库&#xff1b;3、Python与…

外贸货源怎么找?9大优质货源渠道分享!

近几年跨境电商无货源模式大火了一把&#xff0c;让不少人都跃跃欲试。毕竟这种模式投资少&#xff0c;门槛低&#xff0c;回本快&#xff0c;想增加额外收入或创业的人们都争相涌入。但是要想做得好&#xff0c;选好货源渠道就是关键了。如果不小心选错了供应商&#xff0c;可…

关键词提取

在自然语言处理领域中&#xff0c;处理海量文本信息的关键在于把用户关心的问题提取出来。而关键词是能够表达文档中心内容的词语&#xff0c;更是表达文档主题的最小单位。因此&#xff0c;文本关键词的提取对于文本信息的理解是至关重要的。 关键词提取是文本挖掘领域下的一个…

javacv和opencv对图文视频编辑-java项目搭建1

要搭建javacv项目&#xff0c;你需要按照以下步骤进行操作&#xff1a; 下载并安装OpenCV库&#xff1a;访问OpenCV的官方网站&#xff08;https://opencv.org/&#xff09;并下载适合你系统的版本。安装完成后&#xff0c;将OpenCV的库文件添加到你的项目中。 添加JavaCV库&a…

MybatisPlus框架入门级理解

MybatisPlus 快速入门入门案例常见注解常用配置 核心功能条件构造器自定义SQLService接口 快速入门 入门案例 使用MybatisPlus的基本步骤&#xff1a; 1.引入MybatisPlus的起步依赖 MybatisPlus官方提供了starter&#xff0c;其中集成了Mybatis和MybatisPlus的所有功能&#…

如果你正在学自动化测试,那么请你仔细看完这篇文章

接触了不少同行&#xff0c;由于他们之前一直做手工测试&#xff0c;现在很迫切希望做自动化测试&#xff0c;其中不乏工作5年以上的人。 本人从事软件自动化测试已经近5年&#xff0c;从server端到web端&#xff0c;从API到mobile&#xff0c;切身体会到自动化带来的好处与痛楚…

python面试题

python装饰器 装饰器的本质就是一个函数能为其它函数增加额外功能 装饰器不加参数 #coding:utf-8 from time import time#装饰器函数 def elapsed(target):"统计目标函数执行的耗时"def decorated(*args,**kwargs):start time()r target(*args,**kwargs)end tim…

NXP-RT1176开发(一)——环境搭建(MCUXpressoIDE/VSCode)

目录 1. 安装IDE 1.1 官方开发的IDE软件 1.2 Config工具下载 1.3 说明&#xff08;需先有SDK&#xff09; 2. 下载SDK 3. VScode环境下编译 3.1 安装插件 3.2 确保本地有交叉编译工具链和CMAKE 3.3 加载本地SDK 3.4 导入例程编译 1. 安装IDE 该处理器编译规则可以MDK…

FlinkAPI开发之水位线(Watermark)

案例用到的测试数据请参考文章&#xff1a; Flink自定义Source模拟数据流 原文链接&#xff1a;https://blog.csdn.net/m0_52606060/article/details/135436048 Flink中的时间语义 哪种时间语义更重要 从《星球大战》说起 数据处理系统中的时间语义 在实际应用中&#xff0c…

vue cli 配置了productionSourceMap: true 开启source-map 没有生成map文件

因为UglifyJsPlugin导致生成map失败&#xff0c;可以将其注释即可 也可以加上 new UglifyJsPlugin({sourceMap:true })

用python实现给出关键字查找并标注pdf文件中关键字

要在Python中标注PDF文件中的关键字&#xff0c;可以使用Python的PDFMiner库和Python的matplotlib库。 首先&#xff0c;需要安装这两个库。可以使用pip命令进行安装&#xff1a; shell 复制代码 pip install pdfminer.six matplotlib 接下来&#xff0c;可以使用以下代码实现…

基于Java+SSM运动会管理系统详细设计和实现【附源码】

基于JavaSSM运动会管理系统详细设计和实现【附源码】 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统 …