el-form验证问题

news/2024/7/19 14:37:37 标签: vue.js, elementui, 前端, javascript, 开发语言, js

1.如果第一次打开el-dialog有验证失败,重新打开el-dialog仍然会有验证失败

<div>
	<el-dialog width="50%" title="对象信息" :visible.sync="dialogFormVisible" @close="closedialog">
		<UploadFile ref="child"></UploadFile>
	</el-dialog>
</div>

解决方案:
给el-dialog绑定close事件,并调用clearValidate()

javascript"> closedialog () {
      this.$refs.child.$refs.formdata.clearValidate();
},

2.手动控制验证状态

error:错误信息
validate-status:验证状态。 success 验证成功, error验证失败, validating验证中,''未验证

<el-form-item 
	:error="validateFormState.error" 
	:validate-status="validateFormState.state">
</el-form-item>
// 在验证成功或者失败的时候去手动控制error和validate-status的值即可。

3.编辑界面验证这行数据的正确值验证失败

后端根据传送的值验证是否可用,但是在编辑界面中,这条数据的正确值也会被送到后端进行验证(这里新增和编辑使用了同一个组件),所以会出现验证失败问题。

javascript">var validateNum = async (rule, value, callback) => {
  if (value === '') {
     callback(new Error('请输入版本号'));
   } else if (value === this.versionNum) {
     callback();
   } else {
     var val = await this.onBlur();
     if (val) {
       callback();
     } else {
       callback(new Error('版本号不可用'));
     }
   }
 }

增加一个条件进行判断

拓展

调用函数进行验证:

javascript">// 对整个表单进行验证
this.$refs.formdata1.validate(valid=>{
	// 验证成功则valid为true
})
//对部分字段进行验证
validateField

父组件调用子组件中的ref:this.$refs.child.$refs.formdata.clearValidate()

el-form 提供了表单校验功能, :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则。

el-form 的 model 是 formData,那么 el-form-item 中所有需要校验的表单的 的 model 也必须是 formData.xxx ,即 formData 对象的直接属性。

需要注意的是,如果要用 rules 进行表单校验,那么 el-input 绑定的元素必须是 el-form 的 model 的直接属性,否则会导致校验失败。

el-input默认值的类型是字符串类型,输入即使是数字,也被el-input 自己处理成了字符换数字。
解决办法:

<el-form-item class="base_block" label="渠道号" prop="channelId" label-width="40%">
	<el-input type='number' class="el_input_box" v-model.number="channel.baseConfDetail.channelId" :disabled="!isEdit"/>
</el-form-item>

设置type=‘number’,v-model 需要更改为 v-model.number 否则同样验证不通过


http://www.niftyadmin.cn/n/5322762.html

相关文章

SpringBoot Logback修改日志级别

1. 在application.yml 通过配置配置&#xff0c;按住Ctrl 左键可以看源码 logging:level:root: infocom.dj.test.controller: debugcom.dj.test.service: debug2. 自己写接口直接动态修改日志级别&#xff0c;读取application.yml配置文件算是间接修改 package com.dj.sprin…

golang实现rpc方法二:使用jsonrpc库【跨平台】

首先在golang实现rpc方法一net/rpc库中实现了RPC方法&#xff0c;但是那个方法不是跨平台的&#xff0c;没法在其他语言中调用这个实现的RPC方法&#xff0c;接下来我们可以通过jsonroc库实现跨语言的RPC方法。俩种实现方式的代码其实也是差不多的&#xff0c;大差不差&#xf…

【JavaSE语法】图书管理系统实现详解

图片出处&#xff1a;The worlds biggest drone photo and video sharing platform | SkyPixel.com 导言 在学完JavaSE语法后&#xff0c;我们就可以去尝试写一个简单的图书管理系统来进一步提升我们面对对象编程的思想。在该系统中会涉及到数组&#xff0c;接口&#xff0c;封…

2024趋势:ERP中数据分析的五大要点

2024 年&#xff0c;数据分析不仅仅是 ERP 实施中的一个额外功能;这就像第一步&#xff0c;将最终确定整个 ERP 实施项目的成功之路。忘记笨重的电子表格和无休止的报告——准备好驾驭这五种新兴趋势的浪潮&#xff1a; 一、人工智能和机器学习 (ML) 的兴起 人工智能驱动的数据…

简单谈一谈pytorch中混合精度训练(torch.cuda.amp)的功效及命令行参数解析器的使用

一、首先来了解一下一个完整的命令行参数解析器的构成&#xff1a; 1. 创建解析器对象&#xff1a;使用argparse.ArgumentParser()创建一个解析器对象&#xff1b; 2.添加位置参数和其它可选参数&#xff1a;使用add_argument()方法添加位置参数和可选参数&#xff0c;指定参…

驾驭数字孪生:智慧水利的未来之路

一、数字孪生技术的原理与实践 随着科技的不断进步&#xff0c;数字孪生技术作为一项创新的技术应用&#xff0c;正在逐渐改变我们的生活和工作方式。特别是在工业领域&#xff0c;数字孪生技术被视为实现智能制造、提升生产效率和产品质量的重要手段。本章节将深入探讨数字孪…

postgresql查询每组的前N条记录

方式 ROW_NUMBER() OVER (PARTITION BY "字段1","字段2..." ORDER BY 排序字段1 desc ,排序字段2 DESC) AS row_id 例如&#xff1a; select * from (select *,ROW_NUMBER() OVER (PARTITION BY t.src_ip, t.event_name, t.threats ) AS row_id FROM t…

【网络虚拟化】网络设备常见冗余方式——堆叠、M-Lag、DRNI

网络设备常见冗余设计——堆叠、M-Lag、DRNI 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 网络设备常见冗余设计——堆叠、M-Lag、DRNI 网络设备常见冗余设计——堆叠、M-Lag、DRNI前言一、网络设备虚拟化二、堆叠技术1.技术原理2.…