el-form点击提交后把验证失败的数据传给了后端

问题:版本号需要根据后端返回的结果查看是否可用,在这里1.0.0是不可用的,如果点击其他地方则会报红,可是直接点击提交,则会把1.0.0这个错误的数据也提交给后端。
在这里插入图片描述
在这里插入图片描述
解决方案:
html代码:

<el-form :model="formdata" ref="formdata" label-width="80px" status-icon :rules="rules">
	<el-form-item class="formitem" label="版本号" prop="versionNumber">
	  	<el-input v-model="formdata.versionNumber"></el-input>
	</el-form-item>
<el-form>

js代码:

data () {
	 var validateNum=async(rule,value,callback)=>{
	   if (value === '') {
	     callback(new Error('请输入版本号'));
	   } else {
	     var val=await this.onBlur();
	     if(val){
	       callback();
	     }else{
	       this.formdata.versionNumber='';
	       callback(new Error('版本号不可用'));
	     }
	   }
	 }
	 return {
	   fileList:[],
	   formdata:{
	     versionNumber:'',
	     versionType: null,
	     file:''
	   },
	   rules:{
	     versionNumber:[
	       {validator:validateNum,trigger:'blur'}
	     ],
	   },
	   newFile:{},
	   submitFile:{}
	 }
}

在提交按钮绑定的点击事件中使用validate去查看验证是否正确,正确则进行传输。

submitForm(){
  this.$refs.formdata.validate(valid=>{
    if(valid){
      this.submitFile.versionNumber=this.formdata.versionNumber;
      this.$axios({
        url: `/proxy_version/renew/versionUpload`,
        method: 'post',
        data:this.submitFile,
        success: (result) => {
          console.log(result);
          // this.$message.success("操作成功!");
        }
      });
      console.log(this.submitFile);
    }
  })
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Flume基础知识(十):Flume 聚合实战

1&#xff09;案例需求&#xff1a; hadoop100上的 Flume-1 监控文件/opt/module/group.log&#xff0c; hadoop101上的 Flume-2 监控某一个端口的数据流&#xff0c; Flume-1 与 Flume-2 将数据发送给 hadoop102 上的 Flume-3&#xff0c;Flume-3 将最终数据打印 到控制台。…

【Pytorch】学习记录分享11——GAN对抗生成网络

PyTorch GAN对抗生成网络 0. 工程实现1. GAN对抗生成网络结构2. GAN 构造损失函数&#xff08;LOSS&#xff09;3. GAN对抗生成网络核心逻辑3.1 参数加载&#xff1a;3.2 生成器&#xff1a;3.3 判别器&#xff1a; 0. 工程实现 原理解析&#xff1a; 论文解析&#xff1a;GAN…

综合跨平台全端ui自动化测试框架Airtest——AirtestIDE录制微信小程序脚本教学

前言 有在自动化测试领域的小伙伴应该都知道&#xff0c;app和小程序自动化这一类的自动化测试在实际操作中有时候很棘手让人心烦&#xff0c;动不动就是用appium写代码脚本维护什么的&#xff0c;不仅步骤繁琐&#xff0c;环境配置方面也是繁琐无比&#xff0c;动不动就与客户…

云计算:OpenStack 分布式架构管理VXLAN网络(单控制节点与多计算节点)

目录 一、实验 1.环境 2.各节点新增网卡准备VXLAN网络 3.控制节点配置私有网络 4.计算节点1配置私有网络 5.计算节点2配置私有网络 6.重启服务 7.修改Dashboard 8.新建项目&#xff08;租户&#xff09;及用户 9.新建网络与子网 10.新建实例 11.新建路由 12.新增浮…

【机器学习】循环神经网络(二)-LSTM示例(keras)国际航空乘客问题的回归问题...

使用 Keras 在 Python 中使用 LSTM 循环神经网络进行时间序列预测 国际航空乘客问题的回归问题 这个文件是一个CSV格式的数据集&#xff0c;它包含了从1949年1月到1960年12月的每个月的国际航空乘客的总数&#xff08;以千为单位&#xff09;。第一行是列名&#xff0c;分别是&…

贯穿设计模式-享元模式思考

写享元模式的时候&#xff0c;会想使用ConcurrentHashMap来保证并发&#xff0c;没有使用双重锁会不会有问题&#xff1f;但是在synchronize代码块里面需要尽量避免throw异常&#xff0c;希望有经验的同学能够给出解答&#xff1f; 1月6号补充&#xff1a;没有使用双重锁会有问…

Robot Operating System 2: Design, Architecture, and Uses In The Wild

Robot Operating System 2: Design, Architecture, and Uses In The Wild (机器人操作系统 2&#xff1a;设计、架构和实际应用) 摘要&#xff1a;随着机器人在广泛的商业用例中的部署&#xff0c;机器人革命的下一章正在顺利进行。即使在无数的应用程序和环境中&#xff0c;也…

Python爬虫-大麦网演出数据和票价数据

前言 本文是该专栏的第14篇,后面会持续分享python爬虫干货知识,记得关注。 本文以大麦网为例,获取大麦网全部的演出数据以及对应的票价数据。示例图如下所示: 如上图所示,笔者将在本文详细介绍通过python爬虫去获取全国的“演唱会,话剧歌剧,体育比赛,儿童亲子”等等以…

Odoo | Module | 统计系统周期使用人数/当前在线人数

文内材料 GITHUB地址 前言介绍 Odoo作为开源ERP系统的No.01,近年愈发的得到国内很多公司的关注。 虽然它的定位是中小型企业的ERP管理系统&#xff0c;但是在几年的Odoo开发实施过程中&#xff0c;有不足50人的小型企业&#xff0c;也有上万人的中大型企业。功能快速落地和…

即时设计:设计流程图,让您的设计稿更具条理和逻辑

流程图小助手 在设计工作中&#xff0c;流程图是一种重要的工具&#xff0c;它可以帮助设计师清晰地展示设计思路和流程&#xff0c;提升设计的条理性和逻辑性。今天&#xff0c;我们要向您推荐一款强大的设计工具&#xff0c;它可以帮助您轻松为设计稿设计流程图&#xff0c;让…

c#调试程序一次启动两个工程(多个工程)

概述 c# - Visual Studio : debug multiple projects at the same time? 以在解决方案中设置多个启动项目(右键单击解决方案&#xff0c;转到设置启动项目&#xff0c;选择多个启动项目)&#xff0c;并为包含在解决方案(无、开始、不调试就开始)。如果您将多个项目设置为开始…

IDEA TODO

今天记录一个 IDEA 工具的小技巧&#xff0c; TODO。比如下班前有一个小功能没完善好&#xff0c;此时可以在响应代码上加上 TODO 注解&#xff0c; //密码比对 // TODO 后期需要进行md5加密&#xff0c;然后再进行比对 password DigestUtils.md5DigestAsHex(password.getByt…

Jenkins修改全局maven配置后不生效解决办法、以及任务读取不同的settings.xml文件配置

一、修改Global Tool Configuration的maven配置不生效 说明&#xff1a;搭建好jenkins后&#xff0c;修改了全局的settings.xml&#xff0c;导致读取settings一直是之前配置的。 解决办法一 Jenkins在创建工作任务时&#xff0c;会读取当前配置文件内容&#xff0c;固定在这…

【Leetcode】230. 二叉搜索树中第K小的元素

一、题目 1、题目描述 给定一个二叉搜索树的根节点 root ,和一个整数 k ,请你设计一个算法查找其中第 k 个最小元素(从 1 开始计数)。 示例1: 输入:root = [3,1,4,null,2], k = 1 输出:1示例2: 输入:root = [5,3,6,2,4,null,null,1], k = 3 输出:3提示: 树中…

关于CNN卷积神经网络与Conv2D标准卷积的重要概念

温故而知新&#xff0c;可以为师矣&#xff01; 一、参考资料 深入解读卷积网络的工作原理&#xff08;附实现代码&#xff09; 深入解读反卷积网络&#xff08;附实现代码&#xff09; Wavelet U-net进行微光图像处理 卷积知识点 CNN网络的设计论&#xff1a;NAS vs Handcra…

【数据库】视图索引执行计划多表查询面试题

文章目录 一、视图1.1 概念1.2 视图与数据表的区别1.3 优点1.4 语法1.5 实例 二、索引2.1 什么是索引2.2.为什么要使用索引2.3 优缺点2.4 何时不使用索引2.5 索引何时失效2.6 索引分类2.6.1.普通索引2.6.2.唯一索引2.6.3.主键索引2.6.4.组合索引2.6.5.全文索引 三、执行计划3.1…

【leetcode】字符串中的第一个唯一字符

题目描述 给定一个字符串 s &#xff0c;找到 它的第一个不重复的字符&#xff0c;并返回它的索引 。如果不存在&#xff0c;则返回 -1 。 用例 示例 1&#xff1a; 输入: s “leetcode” 输出: 0 示例 2: 输入: s “loveleetcode” 输出: 2 示例 3: 输入: s “aabb”…

【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax类图

【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax概述 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax快速入门 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax类图 【大数据进阶第三阶段之Datax学习笔记】使用…

FineBI:简介

1 介绍 FineBI 是帆软软件有限公司推出的一款商业智能&#xff08;Business Intelligence&#xff09;产品。 FineBI 是定位于自助大数据分析的 BI 工具&#xff0c;能够帮助企业的业务人员和数据分析师&#xff0c;开展以问题导向的探索式分析。 2 现阶段数据分析弊端 现阶…

系列七、Typora安装 配置

一、安装 1.1、下载安装包 我分享的链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1K5DjV_xhCH5WGiiEHlNQVQ?pwdyyds 提取码&#xff1a;yyds 1.2、安装 无脑下一步&#xff0c;下一步即可。 二、Typora中设置插入的图片左对齐 2.1、背景 往Typora中插入图…
最新文章