iView表单空格验证

最新推荐文章于 2021-12-01 11:05:57 发布
最新推荐文章于 2021-12-01 11:05:57 发布
阅读量2.5k 收藏 4
点赞数 2
分类专栏： iView 文章标签： iView 表单 空格 验证 trim
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xianzhuo_sky/article/details/83069603
版权
本文介绍了在使用iView表单组件时如何处理空格验证问题。当使用async-validator验证器时，直接的必填规则无法阻止空格通过验证。文章提供了两种解决方法：一是使用v-model.trim，它会自动去除首尾空格；二是通过transform函数在验证阶段预处理数据，不影响表单原本的数据。
摘要由CSDN通过智能技术生成

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

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

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

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

例如


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  刘显卓
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
iview的table组件自带的过滤器实现

				
			

			

				

					10-16
				

			

		

		

			
				
主要介绍了iview的table组件自带的过滤器实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

			
		

	



                

              
                



	

		

			

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

				
			

			

				

					杨咩咩
				

				

					04-26
					
					2337
					
				

			

		

		

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

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


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






...

			
		

	



                


  
              

                


	

		

			

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

				
			

			

				

					IT博客技术分享
				

				

					06-18
					
					1979
					
				

			

		

		

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



vue方法：

js代码如下：


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

			
		

	





	

		

			

				
					
Vue Element 去除input前后空格

				
			

			

				

					conqueror__的博客
				

				

					12-01
					
					1104
					
				

			

		

		

			
				
在el-input中可以使用v-model.trim来去除内容中的前后空格



			
		

	



		

			
		



	

		

			

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

				
			

			

				

					10-17
				

			

		

		

			
				
iview中的表单验证是其组件库中不可或缺的一部分，尤其在处理数据提交前的合法性校验中扮演了重要角色。本文主要围绕iview表单验证过程中可能出现的问题进行探讨，并提供了一些解决方案。  首先，表单验证步骤的准确...

			
		

	





	

		

			

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

				
			

			

				

					12-29
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					08-10
				

			

		

		

			
				
"根据配置动态生成有验证的表单"这一技术主题，结合使用了iview框架和async-validator库，旨在创建灵活、可配置的表单验证解决方案。  **1. iview框架**  iview是一个基于Vue.js的UI组件库，提供了丰富的前端组件，...

			
		

	





	

		

			

				
					
iView Form 表单校验注意点

				
			

			

				

					嘿嘿
				

				

					04-20
					
					1225
					
				

			

		

		

			
				
iView Form 表单校验注意点

由pinooc
	2019年8月6日
设置 rules, 并制定 prop
	
<Form ref="topicForm" :model="topicForm" :rules="topicFormValidate" :label-width="80">
  <FormItem label="名称" prop="topicName">
    <Input
           type="text"
           v-model.

			
		

	





	

		

			

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

				
			

			

				

					qq_37721238的博客
				

				

					07-23
					
					6301
					
				

			

		

		

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

方法一：

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

方法二：

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

			
		

	





	

		

			

				
					
关于iview表单验证的问题

					
热门推荐

				
			

			

				

					Amanda_wmy的博客
				

				

					01-10
					
					3万+
					
				

			

		

		

			
				
关于iview表单验证的问题


iview表单验证的步骤：

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

			
		

	





	

		

			

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

				
			

			

				

					chen_vae的博客
				

				

					12-25
					
					2822
					
				

			

		

		

			
				
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 ...

			
		

	





	

		

			

				
					
Iview 表单验证的规则总结

				
			

			

				

					赵树祥的博客
				

				

					06-19
					
					2万+
					
				

			

		

		

			
				
参考文档： https://github.com/yiminghe/async-validator
1. 支持的基本类型
<FormItem
     prop="UserId"
          :rules=" [
              { required: true, message: '请选择一项', trigger: 'change',type:'number',min:...

			
		

	





	

		

			

				
					
iview自定义表单验证

				
			

			

				

					stromGui同视
				

				

					12-05
					
					2万+
					
				

			

		

		

			
				
前两天写后台管理系统，写的我都不知道自己是谁了，太复杂了，尤其是在用iview和vue写的时候就更不好搞了，之前用iview做验证的时候也是费了我很大的力气，这几天稍微闲一点，我要把这一点点经验告诉大家，希望能帮到大家。 <i-form ref= 'formItem' :model="formItem"  :rules='ruleValidate'>
    <form-item label="用户

			
		

	





	

		

			

				
					
iview里Input组件空格回退问题，不允许输入中文，不允许输入特殊符号

				
			

			

				

					Yugoup的博客
				

				

					07-15
					
					1405
					
				

			

		

		

			
				
代码备忘录
要使用@keyup.native，只写@keyup不会生效
<Input @keyup.native="clearBlank" v-model="zyValue" placeholder="请输入..." style="width: 280px" />

methods: {
	clearBlank(){
	  //空格回退
      this.zyValue=this....

			
		

	





	

		

			

				
					
VUE 项目 去除 input 框值 所有空格、vue 组件去除空格、input 去除空格

				
			

			

				

					愿我如星君如月 ... 夜夜流光相皎洁 ...
				

				

					01-14
					
					2万+
					
				

			

		

		

			
				
1.以下所有方法 我都试过：不行。


str.trim(); //去掉首尾空格
str.replace(" ",""); //去除所有空格，包括首尾、中间
str.replaceAll("",""); //去掉所有空格，包括首尾、中间
str.replaceAll(" +",""); //去掉所有空格，包括首尾、中间
str.replaceAll("\\s*",""); //可以替换大部...

			
		

	





	

		

			

				
					
input文本框--去首尾空格

				
			

			

				

					icecoola_的博客
				

				

					05-25
					
					1万+
					
				

			

		

		

			
				
html代码


    &amp;amp;amp;amp;lt;input type=&amp;amp;amp;quot;text&amp;amp;amp;quot; id=&amp;amp;amp;quot;test&amp;amp;amp;quot; name=&amp;amp;amp;quot;test&amp;amp;amp;quot; class=&amp;amp;amp;quot;input-xs &amp;amp;amp

			
		

	





	

		

			

				
					
input输入框自动消除空格

				
			

			

				

					祈澈菇凉
				

				

					05-08
					
					3万+
					
				

			

		

		

			
				
今天遇到了一个问题,用户在在前端的input里面输入id的时候，多写了个空格,数据库里面就找不到id了，所以无法获取输入的id所绑定的标签位置在哪里，现在需要在前端做一个处理，input框输入的数值里面，会自动消除空格。
代码示例：
<!DOCTYPE html>
<html>
    <head>
        &l...

			
		

	





	

		

			

				
					
在Vue中IView组件全局性地去掉其中输入框中前后空格

				
			

			

				

					luoyoupp的博客
				

				

					03-23
					
					1562
					
				

			

		

		

			
				
在Vue中是可以通过使用v-model.trim()的方式实现删除单个input输入框中前后空格的功能。然而，我们遇到的问题是可以通过修改其中的某一个js文件来实现整个项目所有input框中去除前后空格的功能，这时候就需要改变相关组件库中调用输入框中值改变的事件(iveiw中的handInput事件)。如下图所示：

这里我是通过改变iview组件中调用其中Input子组件，输入事件获取到的值，来实现去除前后空格的功能。而要实现这个功能是不能在node_modules中view-design/src目录中相

			
		

	





	

		

			

				
					
iview表单验证某个数组

					
最新发布

				
			

			

				

					07-27
				

			

		

		

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

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值