Vue正则表达式限制input的输入范围

 更新时间:2023年12月13日 09:34:44   作者:Sun Peng  
我们有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字、小数点、英文字母、汉字等代码,感兴趣的朋友跟随小编一起看看吧

Vue正则表达式限制input的输入

<a-input type="text" onkeyup="value=value.replace(正则表达式,'')"> 
如:
<a-input type="text" onkeyup="value=value.replace(/[^\w_]/g,'')"> 

1、只能输入大小写字母、数字、下划线:/[^\w_]/g
2、只能输入小写字母、数字、下划线:/[^a-z0-9_]/g
3、只能输入数字和点:/[^\d.]/g
4、只能输入小写字母、数字、下划线:/[^\u4e00-\u9fa5]/g
5、只能输入数字:/\D/g
6、只能输入英文:/[^a-zA-Z]/g
7、只能输入中文、数字、英文:/[^\w\u4E00-\u9FA5]/g
8、只能输入数字和字母:/[\W]/g
9、除了英文的标点符号以外,其他的都可以:/[!@#$%^&*()-=+]/g
10、只能输入数字代码(小数点也不能输入):/\D/g

<a-input onkeyup="value=value.replace(/\D/g,'')" onafterpaste="value=value.replace(/\D/g,'')"/>

11、只能输入数字,能输小数点:

<a-input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"/>
或者:
<a-input onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}"/>
或者:
<a-input type="text" 
         onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;ase this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" 
        onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;ase this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
      	onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;ase{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"/>

12、只能输入字母和汉字:

<a-input onkeyup="value=value.replace(/[\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers"/>

13、只能输入英文字母和数字,不能输入中文:/[^\w./]/ig

14、只能输入数字和英文:/[^\d|chun]/g

15、小数点后只能有最多两位(数字、中文都可输入),不能输入字母和运算符号:

<a-input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

16、小数点后只能有最多两位(数字、字母、中文都可输入):

<a-input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

17、不可输入中文:/[\u4E00-\u9FA5]/g

18、不可输入空格:/\s+/g 

到此这篇关于Vue正则表达式限制input的输入的文章就介绍到这了,更多相关正则表达式限制input的输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目启动出现cannot GET /服务错误的解决方法

    vue项目启动出现cannot GET /服务错误的解决方法

    这篇文章主要介绍了vue项目启动出现cannot GET /服务错误的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • VUE3之Non-Props属性的具体使用

    VUE3之Non-Props属性的具体使用

    本文主要介绍了VUE3之Non-Props属性的具体使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue中ref引用操作DOM元素的实现

    vue中ref引用操作DOM元素的实现

    本文主要介绍了vue中ref引用操作DOM元素的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 一文详解怎么安装离线vue环境

    一文详解怎么安装离线vue环境

    这篇文章主要给大家介绍了关于怎么安装离线vue环境的相关资料,由于公司要求在内网开发项目,而内网不能连接外网,因此只能离线安装vue环境,需要的朋友可以参考下
    2023-12-12
  • vue项目报错:Missing script:"serve"的解决办法

    vue项目报错:Missing script:"serve"的解决办法

    这篇文章主要给大家介绍了关于vue项目报错:Missing script:"serve"的解决办法,"missing script: serve"是一个错误信息,意味着在执行启动脚本时,找不到名为"serve"的脚本,需要的朋友可以参考下
    2023-11-11
  • 如何利用vue.js实现拖放功能

    如何利用vue.js实现拖放功能

    这篇文章主要给大家介绍了如何利用vue.js实现拖放功能的相关资料,本文并未使用现有的库,而是使用内置的HTML拖放API来实现简单的拖放系统,需要的朋友可以参考下
    2021-06-06
  • 派发器抽离vue2单组件中的大量逻辑技巧

    派发器抽离vue2单组件中的大量逻辑技巧

    这篇文章主要为大家介绍了派发器抽离vue2单组件中的大量逻辑技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue3的api解读之ref和reactive示例详解

    vue3的api解读之ref和reactive示例详解

    这篇文章主要介绍了vue3的api解读之ref和reactive详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • vue组件中props与data的结合使用方式

    vue组件中props与data的结合使用方式

    这篇文章主要介绍了vue组件中props与data的结合使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue2实现组件props双向绑定

    Vue2实现组件props双向绑定

    这篇文章主要为大家详细介绍了如何在Vue2中实现组件props双向绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论