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

news/2024/7/24 6:49:51 标签: vue.js, javascript, 前端

问题:版本号需要根据后端返回的结果查看是否可用,在这里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代码:

javascript">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去查看验证是否正确,正确则进行传输。

javascript">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.niftyadmin.cn/n/5309260.html

相关文章

【LMM 012】TinyGPT-V:24G显存训练,8G显存推理的高效多模态大模型

论文标题&#xff1a;TinyGPT-V: Efficient Multimodal Large Language Model via Small Backbones 论文作者&#xff1a;Zhengqing Yuan, Zhaoxu Li, Lichao Sun 作者单位&#xff1a;Anhui Polytechnic University, Nanyang Technological University, Lehigh University 论文…

C++ 数组详解,很全,很详细

数组 (C) 数组是相同类型的对象序列&#xff0c;它们占据一块连续的内存区。 传统的 C 样式数组是许多 bug 的根源&#xff0c;但至今仍很常用&#xff0c;尤其是在较旧的代码库中。 在新式 C 中&#xff0c;我们强烈建议使用 std::vector 或 std::array&#xff0c;而不是本部…

LeetCode简单题记录

1、两数之和&#xff0c;给定数组nums&#xff0c;求和为target的两个数组元素的下标 我用了两个for循环&#xff0c;官方解为 哈希表&#xff0c;知识盲区 class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {unordered_map<i…

【搜索引擎】elastic search核心概念

前言 本文不涉及ES的具体安装下载、操作、集群的内容&#xff0c;这部分内容会放在后面一篇文章中。本文只包含ES的核心理论&#xff0c;看完本文再去学ES的细节会事半功倍。 目录 1.由日志存储引出的问题 2.什么是ES&#xff1f; 3.ES的数据结构 4.ES的核心原理 5.联系作…

NACHI机器人模拟示教器如何切换中文

前言 现在开始学习机器人的编程语言&#xff0c;那么要学习会用首先得用模拟示教器来学习&#xff0c;但是全是英文确实比较难受一些些&#xff0c;没有中文来的直观。所以摸透一下如何给示教器更换语言。 具体步骤 步骤一&#xff1a;将中文的汉化包下载下来。具体的下载链…

计算机Java项目|Springboot疫情网课管理系统

项目编号&#xff1a;L-BS-ZXBS-07 一&#xff0c;环境介绍 语言环境&#xff1a;Java: jdk1.8 数据库&#xff1a;Mysql: mysql5.7 应用服务器&#xff1a;Tomcat: tomcat8.5.31 开发工具&#xff1a;IDEA或eclipse 二&#xff0c;项目简介 疫情网课也都将通过计算机…

网络中不中,先看ping行不行

文章目录 网络中不中&#xff0c;先看ping行不行语法不加任何参数发送指定数目设定发送时间间隔组合使用更多信息 网络中不中&#xff0c;先看ping行不行 在linux系统里面如果想判断网络的好坏&#xff0c;脑海中蹦出的第一个命令就是ping了。 官方定义为&#xff1a; ping -…

mac -- Navicat premium for mac 12的安装破解过程

下载准备好dmg文件&#xff0c;接下来开始安装破解。 镜像在官网下载&#xff0c;复制打开链接可以直接下载&#xff0c;可以直接下载中文版&#xff0c;不需要汉化&#xff1a;&#xff08;下载包不能用&#xff0c;留言我发给你&#xff09; 英文64位&#xff1a; http://dow…