iView表单空格验证

最新推荐文章于 2022-11-24 16:35:20 发布
最新推荐文章于 2022-11-24 16:35:20 发布
阅读量2.4k 收藏 4
点赞数 2
分类专栏： iView 文章标签： iView 表单 空格 验证 trim
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xianzhuo_sky/article/details/83069603
版权

iView表单组件使用async-validator验证器对表单域中数据进行验证，给
Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 完整的验证规则请参照开源项目 async-validator。 验证方法也支持 Promise。

当我们对表单中某个string类型的域设置为必填时，我们可以使用如下规则

{
   type: 'string' ,required:true,message:'不能为空'}

但是如果我们直接输入空格也会通过验证
如何对输入的空格进行验证?
下面介绍两种方法：
方法一：在表单域的标签上绑定时使用v-model.trim代替v-model

例如


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  刘显卓
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    4
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
iview 非空验证_iview  表单验证

				
			

			

				

					weixin_35724794的博客
				

				

					02-01
					
					238
					
				

			

		

		

			
				
:mask-closable="false"> ref=‘formItemP‘ :model="formItemP" :rules=‘ruleValidateP‘> label="请输入旧密码" prop="oldPwd"> placeholder="请输入旧密码" v-model="formItemP.oldPwd" name="">  label="请输入新密码" pr...

			
		

	



                

              
                



	

		

			

				
					
iview验证input的时候限制输入空格（首尾输入空格）

				
			

			

				

					IT博客技术分享
				

				

					06-18
					
					1904
					
				

			

		

		

			
				
iview验证input的时候限制输入空格（首尾输入空格）



vue方法：

js代码如下：


    // 分区名称验证
    const validateareaName = (rule, value, callback) => {
      var regu = /^ +| +$/g // 匹配空格
      if (value === '') {
        return callback(new Error('请输入分区名称！'))
      } else if (val.

			
		

	



                


  
              

                


	

		

			

				
					
v-model.trim自动过滤前后空格

				
			

			

				

					杨咩咩
				

				

					04-26
					
					2306
					
				

			

		

		

			
				
1、v-model 的修饰符，一般用于控制数据同步的时机

2、.trim 自动过滤输入内容最开始 和 最后的 空格，中间的会保留一个空格，多的会被过滤掉


<el-input v-model.trim="user.login" />






...

			
		

	





	

		

			

				
					
iview 表单 验证

				
			

			

				

					活在当下
				

				

					03-30
					
					1987
					
				

			

		

		

			
				
iView表单组件使用async-validator验证器对表单域中数据进行验证，给

Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 完整的验证规则请参照开源项目 async-validator。 验证方法也支持 Promise。

当我们对表单中某个string类型的域设置为必填时，我们可以使用如下规则

{type: 'string' ,required:true,message:'不能为空'}

但是如果我们直接输入空格也会通过验证

如何

			
		

	



		

			
		



	

		

			

				
					
vue中iview组件实现表单数据的动态校验

				
			

			

				

					苏苏就是小苏苏的博客
				

				

					03-09
					
					5654
					
				

			

		

		

			
				
1.实现效果

2.实现原理

iview组件库Form表单，  ref=“formValidate”，:model=“formInline”，:rules=“ruleValidate”。
选择审核结果的时候动态的设置备注的规则，当为通过为非必填，反之为必填。
为备注项设置相应的动态rule：

:rules="formInline.status == '2'? ruleValidate.remark: [{ required: false }]"

3.实现代码
<template>
  &l

			
		

	





	

		

			

				
					
浅谈关于iview表单验证的问题

				
			

			

				

					10-17
				

			

		

		

			
				
主要介绍了浅谈关于iview表单验证的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
iview同时验证多个表单问题总结

				
			

			

				

					12-29
				

			

		

		

			
				
在上一篇文章中总结了iview表单验证的问题。其实有两种写法：在点击验证时，这样写时，注意在前面的方法中将要验证的form表单加进去。  <Form ref=addAreaForm :model=addAreaForm :rules=ruleValidate :label-...

			
		

	





	

		

			

				
					
根据配置动态生成有验证的表单

				
			

			

				

					08-10
				

			

		

		

			
				
该组件使用了iview框架，以及iview中form表单引用的组件async-validator对表单进行验证

			
		

	





	

		

			

				
					
关于iview表单验证的问题

					
热门推荐

				
			

			

				

					Amanda_wmy的博客
				

				

					01-10
					
					3万+
					
				

			

		

		

			
				
关于iview表单验证的问题


iview表单验证的步骤：

第一步：给 Form 设置属性 rules   :rules
第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“
第三步：注意：Form标签里面是  :model
第四步：注意：在Form标签里面必须添加  ref,相当于id,在此范围内的表单验证有效
第五步：在操作保存按钮时，添加方

			
		

	





	

		

			

				
					
Iview的label标签中添加空格问题

				
			

			

				

					qq_37721238的博客
				

				

					07-23
					
					6232
					
				

			

		

		

			
				
在iview的label属性中添加空格时，如果直接加空格就会只显示一个，用\n这些也不是很好用，下面介绍两种方式来在label中添加空格。

方法一：

全角空格方法，就是在输入空格之前将输入法的半/全角设置为全角，这样输入的空格就是中文空格，会自己识别出来，不过这种方法需要注意的是一个空格相当于一个汉字，所以调格式的话可能会存在不能对齐的情况。

方法二：

通过将标签设置为变量的方法，用js字...

			
		

	





	

		

			

				
					
iview form清除校验状态的实现

				
			

			

				

					10-16
				

			

		

		

			
				
主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

			
		

	





	

		

			

				
					
vue iview表单验证,清除表单验证/去掉表单验证的*号

				
			

			

				

					weixin_47239395的博客
				

				

					11-24
					
					2177
					
				

			

		

		

			
				
iview 表单验证,清除表单验证/覆盖验证*号

			
		

	





	

		

			

				
					
iview表单校验文件的必填

				
			

			

				

					wytraining
				

				

					05-07
					
					1823
					
				

			

		

		

			
				
1.问题描述
iview中使用form组件来校验各个字段的必填项，其中在校验文件时，即使文件已上传成功，依旧提示“请上传文件！”
2.重点

在formValidate.file中定义一个validator的方法
文件上传成功后，清除对文件必填项的校验：this.$refs.formRef.validateField('file') 

3.解决方案
1.html：
<Form
    ref='formRef'
    :model='resultForm'
    :rules='formVali

			
		

	





	

		

			

				
					
巧用iview组件库的Form表单的trim修饰符

				
			

			

				

					harmsworth的博客
				

				

					04-30
					
					2049
					
				

			

		

		

			
				
Form表单前言效果代码默认值为null的效果修改后代码结论
前言
在使用 iview 组件库时，经常需要用到 Form 表单，验证一些用户输入操作，然输入框需要清除两端空格，可以使用 v-model 指令的 trim 修饰符。当输入空格，重置表单时，此时发现表单无法重置。效果如下：
效果
前提为 v-model 添加了 trim 修饰符

代码
<template>
    <...

			
		

	





	

		

			

				
					
iview tag组件和input去除前后空格

				
			

			

				

					chen_vae的博客
				

				

					12-25
					
					2770
					
				

			

		

		

			
				
1.tag组件事件调用

tag的默认事件只有关闭时出触发的： on-close事件，当自己定义格式和clic事件时，会出现触发失灵情况，这时就需要用click.native来修饰了


 &lt;ul style="display: flex; flex-wrap: wrap; width:auto; padding: 0 20px 0;"&gt;
    &lt;li v-for="item ...

			
		

	





	

		

			

				
					
vue项目汇总，iview自定义验证器的问题

				
			

			

				

					Autism、陌亡
				

				

					01-26
					
					1万+
					
				

			

		

		

			
				
在使用iview前端组件的过程中，有时候使用它自带的验证器往往不能满足我们项目中的需求，有时候就需要按照项目需求自定义，iview自带的form验证其实不错，但有些特殊的还是需要自己来实现一些特殊的或者复杂的验证器。

			
		

	





	

		

			

				
					
vue中去掉表单对象上前后空格

				
			

			

				

					aspu O_O的博客
				

				

					12-14
					
					3152
					
				

			

		

		

			
				
实现基于关键字搜索，发现查询到的结果集跟预期不匹配，开发者工具查看相应的请求，发现在请求参数前面多了一个空格，之后就是去掉空格了，vue中去空格只要在该表单对象 的v-model上加trim属性即可

说明：如下代码中使用了vuetify   &lt;v-text-field&gt;可以理解为封装的文本框



&lt;v-card-title flat color="white"&gt;
  &...

			
		

	





	

		

			

				
					
iview 表单number验证

				
			

			

				

					xiaojing的博客
				

				

					08-14
					
					5731
					
				

			

		

		

			
				






将原来的number转为string来处理，并且在验证中判断是否是整数。

			
		

	





	

		

			

				
					
iview表单验证某个数组

					
最新发布

				
			

			

				

					07-27
				

			

		

		

			
				
根据引用\[1\]和引用\[2\]的内容，可以使用iview表单验证来验证某个数组。首先，在表单的rules属性中设置验证规则，其中需要验证的字段对应的prop属性指向对应的数组字段。例如，如果要验证名为"students"的数组字段，可以在rules中设置如下规则：

```javascript
ruleValidate: {
  students: \[
    { type: 'array', required: true, message: '学生不能为空', trigger: 'blur' },
    // 其他验证规则
  \]
}
```

然后，在表单中使用FormItem组件来包裹数组字段的输入框，并设置prop属性为对应的数组字段名。例如：

```html
<FormItem label="学生" prop="students">
  <Input v-model="formValidate.students" type="text" placeholder="请输入学生姓名" style="width: 300px" />
</FormItem>
```

最后，在保存按钮的操作方法中，调用validate方法对整个表单进行校验。例如：

```javascript
handleSubmit() {
  this.$refs\['formValidate'\].validate((valid) => {
    if (valid) {
      // 表单验证通过，执行保存操作
    }
  })
}
```

这样就可以使用iview表单验证来验证某个数组字段了。
#### 引用[.reference_title]
-  *1* *2* *3* [Vue+iview表单验证失效](https://blog.csdn.net/qq_45222558/article/details/124381999)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值