关于element UI 中输入框禁止输入空格的实现_element ui input 不允许中间有空格-程序员宅基地

技术标签: 输入框禁止空格  vue  VUE  element ui  

关于element UI 中输入框禁止输入空格的实现

在项目开发过程中会遇到输入框禁止输入空格或者特殊字符之类的需求,其中禁止输入空格的实现方法如下所示。
1、使用vue框架中的.trim修饰符

<el-input class="nameInput" maxlength="20" v-model.trim="form.teamName" placeholder="请输入团队名称"></el-input>

2、使用原生input标签自带的keyup事件监听方法

// 实现一,简单
<el-input class="nameInput" maxlength="20" v-model="form.teamName" 
@keyup.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm,'')"
 placeholder="请输入团队名称"></el-input>
// 实现二,更符合WEB标准,结构,表现和行为分离原则
<el-input class="nameInput" maxlength="20" v-model="form.teamName" @keyup.native="trimLR" placeholder="请输入团队名称"></el-input>
//js部分
trimLR() {
    
            this.form.teamName = this.form.teamName.replace(/^\s+|\s+$/gm,'')
        }

以上实现方法,需要注意,原生事件onkeyup,改成了@keyup,并且需要在后边追加修饰符.native,这样就是告诉vue使用input的原生事件监听方法,此外,在方法的数据处理中,使用的是$event.target.value来代表input框的value值,不是this.value,也不是document.getElementById(‘XXX’).value。

在方法一中,虽然最终formData.title字段的值,过滤掉了首尾的空格,但是实践发现,在input框的展示上,并没有将空格过滤掉,还是展示的是有空格的数据。因此,更提倡第二种方法,使得数据和展示保持一致性,也方便后续问题的排查和维护。

尝试在方法二中,将keyup事件方法改为input或者change,虽然最终结果,value值过滤掉了空格,但是在页面展示上,value值还是保留了空格,以及光标的位置显示,有些混乱的问题,与方法一的表现差不多。所以还是提倡使用keyup事件来处理禁止输入的问题。
3、使用element UI 的表单验证功能

<el-form ref="myForm" :model="formData" :rules="rules" label-width="100px">
     ... ...
     <el-form-item label="名称" prop="title">
            <el-input placeholder="请输入名称" v-model="formData.title" maxlength=30></el-input>
     </el-form-item>
     ... ...
     <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  </el-form-item>
</el-form>
 
-----------------
 
// 实现一
 
data() {
    
        // 自定义title验证规则
        var validateTitle = (rule, value, callback) => {
    
            const reg = /^[a-zA-Z_\u4e00-\u9fa5]+$/
            if (!reg.test(value)) {
    
                callback(new Error('只允许填写汉字、字母、下划线'))
            } else {
    
                callback()
            }
        }
        return {
    
            ... ...
            //表单验证规则
            rules: {
    
                ... ...
                title: [
                    {
     required: true, message: '请输入名称', trigger: 'change' },
                    {
     validator: validateTitle, trigger: 'change' }
                ],
                ... ...
            },
            ... ... 
        }
    },
 
// 实现二
data() {
    
        return {
    
            ... ...
            //表单验证规则
            rules: {
    
                ... ...
                title: [
                    {
     
                        required: true, 
                        validator: (rule, value, callback) => {
    
                            const reg = /^[a-zA-Z_\u4e00-\u9fa5]+$/
                            if (value == '') {
    
                                callback(new Error('请填写必填项'))
                            } else if (!reg.test(value)) {
    
                                callback(new Error('只允许填写汉字、字母、下划线'))
                            } else {
    
                                callback()
                            }
                        },
                        trigger: 'change' 
                     }
                ],
                ... ...
            },
            ... ... 
        }
    },
---------------------
 
methods: {
    
   ... ...
   submitForm(formName) {
    
       this.$refs[formName].validate((valid) => {
    
          if (valid) {
    
            alert('submit!');
          } else {
    
            console.log('error submit!!');
            return false;
          }
        });
   }
   ... ...
 
}

该方法,需要使用element UI 的Form表单el-form标签,ref属性用来指定表单的名称,用于在代码中使用this.$ref.XXX方法寻找表单所在的DOM节点;rules属性用来指定验证规则;在el-form-item标签中,添加prop属性,属性值与rules验证规则中需验证的字段保持一致。以上两种实现方法,请注意区别和各自的特点。如果考虑复用性,可以使用实现一的写法,如果代码比较多,并且也不会复用的,可以参考实现二的写法,方便规则的寻找。

结合确定按钮的点击事件,将表单ref的属性值传递给submitForm方法,通过this.$refs[formName].validate()方法来判定表单中所有的验证是否都通过了,valid为false,表示未通过的会在表单的相应位置展示自定义的message信息,提示用户按照规则输入。如果valid为true,表明验证通过,执行相关逻辑。这里要注意的一点是,在验证规则rules中,非验证条件下,必须返回callback()方法,使得表单验证形成闭合,否则虽然表单中都展示绿色边框,表示验证通过,但是valid还是false。

此外,第三种方法,只会实时提示警告,展示给用户,所输入的内容不符合自定义的验证规则,但是不会将输入的内容进行过滤,如果有完全禁止输入,而不是只提示用户的需求时,需要结合方法二来进行处理。

举一反三,其他禁止输入的需求,比如只允许输入数字,不允许输入特殊字符等需求,也可以按照上述方法进行处理,并保持数据与展示一致。
————————————————
版权声明:本文为CSDN博主「rushichunqiu」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/rushichunqiu/article/details/95939612

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43365444/article/details/103158555

智能推荐

笔记本一直提示计算机内存不足怎么办,笔记本电脑内存不足怎么解决-程序员宅基地

文章浏览阅读4k次。笔记本电脑内存不足怎么解决所谓“内存不足”就是指在启动或运行DOS应用程序和Windows应用程序时,系统报“Out of memory"或“内存不足"的错误信息。那么笔记本电脑内存不足怎么办呢?下面是笔记本电脑内存不足的解决方法,希望小编整理的对你有用,欢迎阅读:笔记本电脑内存不足的解决方法:检查内存使用情况首先打开系统的任务管理器,点击上方的“性能”,查看当前内存使用情况,如果内存空间不是很多..._内存不足怎么解决

使用STM32CubeMX开发二:按键实验_配置key-up按键管脚的工作模式(-程序员宅基地

文章浏览阅读4k次。简单的按键程序,只是为了熟悉STM32CubeMx开发环境的开发流程。_配置key-up按键管脚的工作模式(

电脑无法进入bios_bios进不去-程序员宅基地

文章浏览阅读3.1k次。bios_bios进不去

windows docker使用CentOS7装宝塔后,服务不会自动启动问题解决_宝塔面板开启没有自启-程序员宅基地

文章浏览阅读1.7k次。windows docker使用centos7装宝塔后,服务不会自动启动问题解决_宝塔面板开启没有自启

设置对话框显示位置_帆软弹窗只能在中间吗-程序员宅基地

文章浏览阅读1.8k次。原文地址:http://blog.sina.com.cn/s/blog_455245fc01000a43.html今天想写个程序,需要对话框在屏幕的右下角。懒得想就去网上搜搜,不过却没找到什么好的。大部分都是给个函数MoveWindow,或者SetWindowPos却不给大家写用法。比如怎么的到对话框的大小等等!反正就是不方便向我一样新手学习。 所以我今天就献丑了,把这写出来。虽然没..._帆软弹窗只能在中间吗

判断素数(C++版)_c++判断素数-程序员宅基地

文章浏览阅读4.1w次,点赞29次,收藏69次。参考博文:https://blog.csdn.net/Jonms/article/details/804646221.简单粗暴法对于判断一个数n是否为素数,按素数的定义,试除以从2开始到m-1的整数,如果都不能整除,则该数一定是素数。#include <iostream>#include <algorithm>using namespace std;bool ..._c++判断素数

随便推点

HDOJ 1312 Red and Black (深搜 DFS)_hdoj 1312 red and black 深搜-程序员宅基地

文章浏览阅读423次。HDOJ 1312 Red and Black (深搜 DFS) 思路:深搜 (DFS),通过四向搜索将 可走的点 变为 不可走的点 ,直到全部,不可再走,记录所有可走的点数。_hdoj 1312 red and black 深搜

Windows登录日志详解_microsoft windows security auditing.-程序员宅基地

文章浏览阅读10w+次,点赞8次,收藏44次。日志在很多时候是非常重要的,尤其是登录日志。从登录日志中可以发现很多有价值的信息,window2008及以后的日志基本一致,2003由于时间太长,微软都停止更新了,所以重点介绍2008的登录日志。_microsoft windows security auditing.

Three.js讲解以及WEBGL实例(转)_three.js (webg)-程序员宅基地

文章浏览阅读6.3k次,点赞3次,收藏4次。webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架,由于其易用性被广泛应用。如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。自己虽然在去年6月份接触过一段时间,但是一直没有时间研究一下,对webGL了解的也不是很多,近来有些时间,总结一下自己掌握的这些WEBGL的东西,也给大家分享一下。在本篇文章当中,会以一个demo为例,读_three.js (webg)

js获取视频缩略图-程序员宅基地

文章浏览阅读9.4k次,点赞3次,收藏2次。原理:播放视频,canvas截图,base64转文件播放视频:input file选择文件,video播放视频 &lt;video :src="file.src" id="video" controls="controls" style="width:100%;max-height:400px;"&gt; &lt;/video&gt;截图_js获取视频缩略图

cache缓存_cachebuilder.newbuilder()-程序员宅基地

文章浏览阅读591次。一、使用CacheBuilder.newBuilder() .方法包:package com.google.common.cachemaven依赖:<dependency><groupId>com.geogle.guava</groupId><artifactId>guava</artifactId><version>11.0.2</version>..._cachebuilder.newbuilder()

跨交换机VLAN配置和验证_*跨交换机配置vlan的目的是什么,步骤和命令是什么?-程序员宅基地

文章浏览阅读1.5k次。实验配置拓扑1:配主机IP地址2:在交换机1和2上创建vlan10,vlan20,把相应拓扑图示端口加入vlan中SW1配置:使用show vlan命令查看端口是否加入vlan中SW2配置:SW3配置:此时交换机划分vlan,但交换机之间没有打trunk模式,测试此时pc能否联通。3:对交换机打上trunk模式交换机3在f0/1-2两个接口先进行封装协议,再打trunk此时发现pc端相同vlan间能够ping通。配置步骤:创建vlan划分端口设置交换机之间t_*跨交换机配置vlan的目的是什么,步骤和命令是什么?