el-form点击提交后把验证失败的数据传给了后端_el-form 校验失败提示后还能保存-优快云博客

文章讲述了如何在Vue.js项目中使用ElementUI构建表单，确保版本号验证有效并防止将无效数据提交到后端。开发者通过`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);
    }
  })
}