clearValidate 无法取消验证的问题

最新推荐文章于 2024-05-07 15:11:34 发布
原创 最新推荐文章于 2024-05-07 15:11:34 发布 · 930 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

本文介绍了一种使用 setTimeout 和 Vue 的 $nextTick 方法来实现异步清除表单验证的方法。这种方法可以确保在进行表单验证时不会出现阻塞，并且能够适配页面渲染的时机。 
// 加个时间做异步处理
setTimeout(() => {
   
   
  this.$refs['childForm'].clearValidate('endTime');
}, 30)

或者


                

                
                
        

    



  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
Element UI resetFields与clearValidate方法

				
			

			

				

					日常笔记/总结/系列知识梳理
				

				

					05-18
					
					7万+
					
				

			

		

		

			
				
表单代码

<Form :label-width="120" :rules="formRules" :model="form" ref="form">
&am

			
		

	



                

            
              



	

		

			

				
					
vue中富文本编辑框 vue-quill-editor 无法触发验证问题与验证提示无法取消

				
			

			

				

					weixin_58207509的博客
				

				

					11-01
					
					3143
					
				

			

		

		

			
				
今天用vue-quill-editor过程中发现 vue-quill-editor 无法触发验证只有当点击确定才能触发

上网搜了一下大致解决流程如下

1 自定义一个 事件


<el-form-item label="题干:"  prop="questionss"> //验证字段
          <quill-editor ref="text"
                        v-model="form.question"
                   ..

			
		

	



              


  
              

                


	

		

			

				
					
Element-ui 移除表单校验 clearValidate和resetFields

				
			

			

				

					莫不静好
				

				

					07-06
					
					7467
					
				

			

		

		

			
				
一、clearValidate 移除表单校验 初始化 一般用于添加
form 表单修改时，点击“确定”按钮，提示 “金额不能为空”

rules: {
  oneUpAmount: [
  { required: true, trigger: 'blur', message:'金额不能为空'},
  { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保

			
		

	





	

		

			

				
					
elementUI下拉框切换引起的校验规则无法清除的问题

				
			

			

				

					程序员的自我修养
				

				

					08-12
					
					2953
					
				

			

		

		

			
				
问题描述

切换下拉框选项，下面的输入框联动显示指定内容或者清空内容，在显示指定内容的情况下，一切正常；

当需要清空内容时，清空这一动作会触发校验规则，于是会出现切换下拉选项后清空内容立即出现校验规则“此项为必填项” ，但这样是不对的，因为用户并没有开始填写。



解决办法

经过各种移除校验的尝试，只有一种方式可以达到效果：

例如：需移除校验的是domainCode字段，那么：

1. 将domainCode的校验规则全部移除；

2. 将domainCode字段清空；

3. 在setTimeou

			
		

	



		

			
		



	

		

			

				
					
Andtv 清空表单校验

				
			

			

				

					m0_58893670的博客
				

				

					06-14
					
					635
					
				

			

		

		

			
				
检验同一类型下的 code 不能重复，点击关闭按钮 清空表单校验提示语点击 “关闭” 按钮之后，再次点击 “新增” 或 “编辑”，字典代码 字段仍提示 “字典代码重复，请重新输入！”移除所有表单项的校验事例...

			
		

	





	

		

			

				
					
clearvalidate

				
			

			

				

					09-06
				

			

		

		

			
				
 在表单重置或取消操作时，清除所有表单项的验证信息。  3. 避免在动态更改表单数据后，旧的验证信息仍然显示。   使用方法：  1. 通常通过表单的ref来调用clearValidate方法。  2. 可以清除整个表单的验证状态，也...

			
		

	





	

		

			

				
					
 vue element ui this.$refs 取消某个验证

				
			

			

				

					03-31
				

			

		

		

			
				
例如，在模板中，可以通过 `ref` 属性获取到需要取消验证的表单项，然后调用 `clearValidate` 方法取消该表单项的验证：  ```html 姓名" prop="name" ref="nameFormItem">  <el-input v-model="form.name"></el-...

			
		

	





	

		

			

				
					
vue3 element-plus 表单验证 上传附件以后怎么取消提示请上传 而非点击保存才生效

					
最新发布

				
			

			

				

					12-07
				

			

		

		

			
				
根据用户需求，需要在Vue3和ElementPlus中实现：上传附件后立即取消表单验证中的'请上传'提示（而不需要等到点击保存按钮）。同时，用户提到不依赖点击保存生效，即需要在上传成功后立即触发表单验证的清除。   分析...

			
		

	





	

		

			

				
					
el-form清除校验规则不生效的两种原因和分别的解决办法

					
热门推荐

				
			

			

				

					qq_42453751的博客
				

				

					12-16
					
					1万+
					
				

			

		

		

			
				
1、
原因：在 rules 验证规则内触发条件（trigger）添加了 change ，会在值改变的时候触发验证规则，所以在页面进入对表单 重新赋值 导致值改变，触发了 change 事件，从而触发验证规则。
解决办法：将验证规则 rules 修改为只在 blur 条件下触发，去掉触发条件（trigger）里的 change ，这样就避免了赋值时触发 change 事件，导致验证表单。
原来的校验规则里面是：

改为：

2、
原因：校验规则清除方法clearValidate （）是对 DOM 的操作，
解

			
		

	





	

		

			

				
					
element clearValidate()移除表单校验

				
			

			

				

					coldriversnow的专栏
				

				

					08-02
					
					2676
					
				

			

		

		

			
				
<div id="flex">
  <div id="left">我在左边，自适应布局</div>
  <div id="right">我在右边，定宽</div>
</div>




			
		

	





	

		

			

				
					
Element-Ui表单移除校验clearValidate和resetFields

				
			

			

				

					SunshineGGB的博客
				

				

					07-10
					
					1424
					
				

			

		

		

			
				
添加和修改公用一个弹窗，点击添加弹窗后，如果没移除表单校验的话，再点击修改弹窗时校验就会被记住，所以需要移除校验，但在清空表单校验时会报如下错误：



那么，你只需要加上这段话即可


this.$nextTick(()=>{
    this.$refs.addArray.resetFields(); 
 })


再此,我顺便说一下resetFields和clearValidate的区别：

 this.$refs.form.resetFields(); //移除表单校验并初始化表单，一般用于.

			
		

	





	

		

			

				
					
element-plus无法清除表单验证

				
			

			

				

					最是人间留不住，朱颜辞镜花辞树。
				

				

					08-01
					
					1095
					
				

			

		

		

			
				
还可以给el-dialog设置@open="方法名" .在打开对话框时再清除一次。在打开对话框时，对话框内的表单验证还是存在。

			
		

	





	

		

			

				
					
el-form表单使用clearValidate移除校验和移除某个字段的校验

				
			

			

				

					四木的博客
				

				

					05-07
					
					3572
					
				

			

		

		

			
				
el-form表单使用clearValidate移除校验和移除某个字段的校验

			
		

	





	

		

			

				
					
【vue3+vue2】清除ElementUI的el-input标签的校验-区别——resetFields()-移除校验结果并重置字段值 & clearValidate()-移除校验结果

				
			

			

				

					weixin_44867717的博客
				

				

					09-07
					
					6763
					
				

			

		

		

			
				
清除ElementUI的el-input标签的校验——resetFields()与clearValidate()的区别
1、在el-form上方写属性 ref=“form”
<el-form ref="form" :model="form"  :rules="rules"  label-width="90px">

2、写清空代码，这里的form一定要和ref的值一致
this.$nextTick(() => { // 表单数据置空 并且移除校验
     this.$refs['form

			
		

	





	

		

			

				
					
vue element  rules 页面 表单验证 resetFields、clearValidate

				
			

			

				

					洪君的博客
				

				

					06-05
					
					2875
					
				

			

		

		

			
				
element 的from表单有封装的验证方法


onkeyup="javascript:this.value=this.value.replace(/[^\d]/g,'')"

数字框 键盘按键事件 消除非数字字符

弹窗点击取消，清除表单验证


this.$refs['formObj'].resetFields()

next：


this.$nextTick(() => { t...

			
		

	





	

		

			

				
					
vue clearValidate() 没有生效

				
			

			

				

					陈熙之的博客
				

				

					02-06
					
					3437
					
				

			

		

		

			
				
vue clearValidate() 没有生效

			
		

	





	

		

			

				
					
vue项目element-ui问题：“Cannot read property ‘resetFields‘/‘clearValidate‘ of undefined“问题解决

				
			

			

				

					учёба
				

				

					03-30
					
					1576
					
				

			

		

		

			
				
vue项目element-ui问题："Cannot read property 'resetFields'/'clearValidate' of undefined"问题解决

			
		

	





	

		

			

				
					
vue表单校验clearValidate失效问题解决

				
			

			

				

					qq_39285178的博客
				

				

					02-03
					
					7943
					
				

			

		

		

			
				
// this.$refs.nowFileform.resetFields();
              setTimeout(function () {
                _this.$refs.nowFileform.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
              },30);

至于原因，不知道，希望有直到大佬告诉我一下
...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值