elementUI中select表单验证问题

最新推荐文章于 2023-03-27 16:22:29 发布
转载 最新推荐文章于 2023-03-27 16:22:29 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/rongjuan/p/9365761.html
文章标签：

#javascript #ui #ViewUI

本文介绍如何解决Element UI中使用同一模态框进行编辑和新增操作时的表单残留问题。通过使用v-if特性使对话框完全重新初始化，从而避免表单重置不彻底导致的错误提示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前提：编辑和添加使用同一个模态框会出现以下一幕

按正常逻辑，新建所有内容都应该清空，但是清空后总是会出现这个提示，使用this.$refs[formName].resetFields()不管用

可以使用v-if来使整个dialog 都“初始化”

<el-dialog :title="dialogTitle" v-if="dialogVisible" :visible.sync="dialogVisible" >
</el-dialog>

这样在新建的时候清空表单就不会出现上边这个问题了

 



转载于:https://www.cnblogs.com/rongjuan/p/9365761.html

                

        




    

    
  



    



                



	

		

			

				
					
elementui下拉框不回显_element-ui 中el-select表单不回显和校验不通过的问题

				
			

			

				

					weixin_39538536的博客
				

				

					02-15
					
					704
					
				

			

		

		

			
				
项目中有一个需求，填写表单，有两个相关联的下拉框，要根据部门筛选部门内的人员当部门切换时，清空负责人里的内容一开始的写法v-for="(item,i) in getDepartments":key="i":label="item.name":value="item.id">v-for="(item,i) in headuserList":key="i":label="item.name":v...

			
		

	



                

            
              



	

		

			

				
					
el-select 必填项验证 下拉框必填项验证

				
			

			

				

					weixin_50885665的博客
				

				

					04-10
					
					8772
					
				

			

		

		

			
				
注意:选择的数据类型

常规的方式，注意

第一点：

v-model绑定的数据要和上面的prop的名称一致

第二点:

由于Form的校验内置了async-validator，而它会给每个字段加一个默认的值为string的type规则，即默认情况下字段必须是字符串型。

但是一般选择的是类别的id，所以类别就需要你自己设置成number才可以


type类型: string    number




  password: [
          {required: true, ...

			
		

	



              


  
              

                


	

		

			

				
					
element-ui的el-select下拉框获取值

				
			

			

				

					M_SSY的博客
				

				

					09-28
					
					2万+
					
				

			

		

		

			
				

    &lt;el-form ref="form" :model="form" style="width:300px;margin:0 auto;"&gt;
      &lt;el-form-item label="名字"&gt;
        &lt;el-select @change="selectGet" v-model="form.region

			
		

	





	

		

			

				
					
在vue里面，element ui，el-select表单选中校验失败

				
			

			

				

					qq_40712862的博客
				

				

					07-28
					
					5225
					
				

			

		

		

			
				
在vue里面，element ui，el-select表单选中校验失败

			
		

	



		

			
		



	

		

			

				
					
element ui中的select 下拉出现蓝色字体解决

				
			

			

				

					weixin_45075981的博客
				

				

					11-06
					
					3156
					
				

			

		

		

			
				
出现上述原因：你写的value属性的绑定值是对象，在规定中只能value的值只能是boolean / string / number这三种类型，所以要加上value-key属性，


 <Select v-model="oftenList" value-key="id" :placeholder="quickList[0]&&quickList[0].title" @change="sqlDataInput">
            <Option
      ...

			
		

	





	

		

			

				
					
实现elementUI表单的全局验证的方法步骤

				
			

			

				

					10-17
				

			

		

		

			
				
首先，我们需要理解表单验证的基本概念。在Element UI 中，每个表单字段的验证可以通过`rules`属性定义，例如：  ```javascript name: {  required: 是否必填,  validator: 自定义规则,  message: 失败提示消息(非...

			
		

	





	

		

			

				
					
elementui 复杂 表单验证_vue+elementUI 复杂表单的验证、数据提交方案

				
			

			

				

					weixin_39877504的博客
				

				

					12-20
					
					241
					
				

			

		

		

			
				
背景当我们在做后台管理系统时，经常会遇到非常复杂的表单：表单项非常多在各种表单类型下，显示不同的表单项在某些条件下，某些表单项会关闭验证每个表单项还会有其他自定义逻辑，比如输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本。。。在这种错综复杂的情况下，完成表单的验证和提交可以查看具体例子：例子中省略了很多琐碎的功能，只保留整体的复杂表单框架，用于展示解决方案方案1： 在一个vue文件...

			
		

	





	

		

			

				
					
ElementUI 表单单个验证

				
			

			

				

					阿狸演绎的博客
				

				

					03-16
					
					6329
					
				

			

		

		

			
				
ElementUI 表单单个验证
今日在工作遇到一个问题,需求是这样的,总共有12个字段,其中第四个字段如果填写了,第五个,第六个和第七个就非必填,如果第五个,第六个第七个填了,第四个就非必填
实例图
如果区域选择的是北京,则只要填写前三项就可以,
如果区域选择的是上海或者不选,则校验的是全部
如下图

解决方法
方案一
简单粗暴,好实现,技术含量低
直接将表单按字段拆分开,分成两个或者三个的表单,根据条件,校验需要的表单.
方案二
elementUI官方在表单校验文档中已经说明,取消单个校验的方法
结合这

			
		

	





	

		

			

				
					
基于 ElementUI 的表单设计器

					
最新发布

				
			

			

				

					08-26
				

			

		

		

			
				
f-render不仅支持基本的表单元素，还可能包括条件逻辑、表单验证、数据绑定等多种高级特性。  在实际使用中，"f-render"可能包含以下几个关键知识点：  1. **Vue.js基础**：掌握Vue.js的基本概念和API，如组件、指令...

			
		

	





	

		

			

				
					
Vue ~ element-ui 动态表单验证，支持添加和删除操作

				
			

			

				

					07-27
				

			

		

		

			
				
在动态表单验证场景中，el-table常用于展示和编辑表单数据。通过与el-form结合，可以实现表格内的动态表单验证，例如，每行表格数据都可以独立进行验证。  4. 动态添加和删除操作： 在实际应用中，往往需要支持用户...

			
		

	





	

		

			

				
					
element-ui的el-form添加验证规则，必填项，填完后还会有红色提示！

					
热门推荐

				
			

			

				

					绝圣弃智-零的博客
				

				

					05-10
					
					4万+
					
				

			

		

		

			
				
问题背景：

vue+element-ui项目，设计登录界面。用户名和密码都是必填项，未填写会在输入框下方提示“请输入用户名”或“请输入密码”。



问题描述：

打开登录界面后，用户名和密码都已填写，还提示我“请填写...”



问题分析：

相关代码：


//html代码


<el-form
          :rules="rules"
          class="...

			
		

	





	

		

			

				
					
el-select点击选择后仍有rules提示问题

				
			

			

				

					Giraffe0615的博客
				

				

					06-11
					
					1992
					
				

			

		

		

			
				
el-select点击选择后仍有rules提示问题

			
		

	





	

		

			

				
					
iview 表单验证问题 Select 已经选择 还是弹验证提示

				
			

			

				

					zzzz121380的博客
				

				

					07-20
					
					1683
					
				

			

		

		

			
				
问题iview的Select下拉框的时候，数据验证必填，明明选择了数据，却一直提示验证不能通过。

			
		

	





	

		

			

				
					
解决 el-select multiple 下拉多选控件，一进页面就会触发表单校验问题

				
			

			

				

					_修铁路的、的博客
				

				

					01-05
					
					9829
					
				

			

		

		

			
				
场景：

    新增页面使用el-select multiple 下拉多选控件，并设置了非空校验，打开页面时，下拉多选控件会自动触发表单非空校验，如下图所示：



   预期效果是：打开页面，职能属性和其他属性一样，不会自动触发表单非空校验，而是在操作当前属性时触发。

  经过查询和测试，目前找到两种方法，但总体都是思路都是一致，设置初始值为空数组即可

解决方法：

第一种：

  页面初始化时，设置当前属性(职能属性)初始值为空数组，例如：[]


export d...

			
		

	





	

		

			

				
					
ElementUI rules全功能介绍，同时也适用于avue中

				
			

			

				

					经验之谈，不做搬运工
				

				

					03-27
					
					2174
					
				

			

		

		

			
				
ElementUI组件库中表单校验默认使用的是async-validator，所以要了解ElementUI表单验证的rules规则，先了解async-validator。type
String，表示该项的数据类型，不符合类型要求，则验证不通过，显示错误信息。

支持的类型如下：

string: String类型，这是默认值。
number: Number类型，包含整数和小数。
integer： 整数。
float：小数，此时不能为整数，必须有小数点。
boolean：Boolean类型，true/fals

			
		

	





	

		

			

				
					
element-ui 表单校验 rules 配置

				
			

			

				

					慢慢manman的博客
				

				

					02-21
					
					1875
					
				

			

		

		

			
				
向验证规则添加一个功能。在验证之前，先转换属性，然后将其重新分配给源对象，以更改该属性的值。（如果该len属性与min和max范围属性结合使用，len则优先。有时有必要在验证之前转换值，以强制或以某种方式对其进行清理。规则属性指示一个正则表达式的值必须匹配，才能通过验证。指示type要使用的验证器。创建新时不会产生异常的的实例或字符串。属性为true是，该字段为必填项。可以为指定的字段自定义异步验证功能。可以为指定字段自定义验证功能。规定最小长度与最大长度。

			
		

	





	

		

			

				
					
通过数据判断element-ui的复选框可选或者不可选

				
			

			

				

					adisMadman的博客
				

				

					01-19
					
					873
					
				

			

		

		

			
				
<el-table :data="tableData" stripe style="width: 100%; text-align: center" @selection-change="handleSelectionChange">
<!-- checkbox选中框 -->
     <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column&gt.

			
		

	





	

		

			

				
					
elementui的下拉框select组件实现可下拉和输入功能

				
			

			

				

					前端打工人的博客
				

				

					06-08
					
					5604
					
				

			

		

		

			
				
下拉框组件，默认只能下拉选择数据，还可以添加使用搜索功能。如果你想在下拉选择的基础上，再增加一个可以自定义输入的功能，这时候就需要使用一个属性：
只需要在下拉框添加

   必须有该属性
    可直接回车键入...

			
		

	





	

		

			

				
					
element下拉框获取选中的内容

				
			

			

				

					sout-lanys
				

				

					01-14
					
					9762
					
				

			

		

		

			
				
前言
好久没更新了，开发遇到新的东西，记录一下，公司自研的项目PC端迭代到前后端分离了，巧了遇到新的UI框架 element-ui，虽然不熟，还是被硬着头皮上。
一、需求及实现效果
需求：在下拉框中选择一条数据，获取他的id及name数据（多参数）。
实现效果：

二、实现
html
@change="selectDoctor(doctorId)" <!-- 参数可以不写，会自带的 -->

      <el-form-item label="医生">
          <

			
		

	





	

		

			

				
					
全局验证elementUI表单的详细步骤与代码示例

				
			

			

				

					
				

			

		

		

			
				
本文将详细介绍如何在Element UI框架中实现表单的全局验证，包括以下几个关键步骤：  1. **理解验证规则**：全局验证规则通常关注基础的验证条件，如字段是否必填、内容是否为空以及数据类型的一致性。例如，对于...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值