首页 > 其他分享 >el-input限制输入只能是数字

el-input限制输入只能是数字

时间:2022-08-19 15:23:41浏览次数:57  
标签:el 限制 数字 number value input 输入

方法一:

通过设置type属性:type="number",这种方式一般会影响样式,不建议使用,如下图:

<el-input type="number" v-model="aaa"></el-input>

方法二:

通过绑定值限制的方式:v-model.number="aaa",这种方式会限制一般的数字,但是会影响maxlengt属性,并且e是可以输入的,一般情况可以使用,严格限制的话不建议使用

<el-input v-model.number="aaa"></el-input>

 

方法三:(建议使用)

通过对value值进行正则限制:οnkeyup="value=value.replace(/[^\d]/g,' ')",绑定一个onkeyup监听事件,/[^\d]/g 是用来匹配所有非数字内容的正则表达式,将之替换成空字符串,这种方式不会影响任何属性,推荐使用

<el-input v-model="aaa" οnkeyup="value=value.replace(/[^\d]/g,'')"></el-input>

标签:el,限制,数字,number,value,input,输入
From: https://www.cnblogs.com/qiangyanhuanxiao/p/16602082.html

相关文章

  • (一)Shell概述
    Shell是一个命令行解释器,它接受应用程序/用户命令,然后调用操作系统内核执行命令。Shell也是一个功能强大的编程语言,易编写,容易调试,灵活性强。Shell:命令解释器,根据输入......
  • Delphi xe 错误:...segmentation fault(11)
    Delphixe错误:...segmentationfault(11)错误原因描述:分段故障发生原因:1)一般为输出数据的时候,超出了列表的范围值导致,例如,列表最大值10行,你强行输出11行的数据......
  • IDEA安装element-ui报错npm ERR Found: vue@3.2.26npm ERR node_modules/vuenpm ERR v
    npmERR!codeERESOLVEnpmERR!ERESOLVEunabletoresolvedependencytreenpmERR!npmERR!Whileresolving:novel@0.1.0npmERR!......
  • ElasticSearch拼音分词
    有时我们有允许用户按照拼音搜索的需求,一个解决办法是在插入文档的分词过程中就生成对应的拼音,同时插入进倒排索引。我们可以使用这个拼音分词插件:medcl/elasticsearch-an......
  • IO流知识:FilelnputStream单个字节读取文件
    1packageIO;23importjava.io.FileInputStream;4importjava.io.FileNotFoundException;5importjava.io.IOException;6/*7需求:读取"E:\\javaIo\\da......
  • Bellman-Ford(贝尔曼—福特)
    Bellman-Ford(贝尔曼—福特)时间复杂度O(nm)#include<bits/stdc++.h>usingnamespacestd;#definelllonglong#defineendl"\n"#definesfscanf#definepfprin......
  • 关于window.location.reload(false);window.location.reload(true)
    window.location.reload(false);当window.location.reload();默认也是false;先会根据浏览器的http请求的头部If-Modified-Since的值来判断在请求文件时文件是否发生变化,如......
  • 使用阿里读取 excel文件遇到的问题
    Servlet.service()forservlet[dispatcherServlet]incontextwithpath[]threwexception[Requestprocessingfailed;nestedexceptioniscom.alibaba.excel.exc......
  • layui的eletree中的下拉树增加搜索功能
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><metaname="viewport"content="width=device-width,initial-sc......
  • helm 部署kafka,zookeeper集群
    环境要求:k8s集群,helm组件实现:helmrepoaddbitnamihttps://charts.bitnami.com/bitnamihelmrepoupdatehelminstallkafkabitnami/kafka\ --setstatefulset.r......