脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → 正则表达式限制input的输入

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的输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 打包组件报错:Error:Cannot find module 'vue/compiler-sfc'

    打包组件报错:Error:Cannot find module 'vue/compiler-sfc&ap

    最近遇到这样的问题,vue组件库搭建过程中使用webpack打包组件时报错,本文给大家分享打包组件报错:Error: Cannot find module ‘vue/compiler-sfc‘的解决方法,感兴趣的朋友一起看看吧
    2023-12-12
  • vue跳转方式的常见方式以及区别分析

    vue跳转方式的常见方式以及区别分析

    在Vue.js中页面跳转是前端开发中常见的需求,Vue提供了多种页面跳转方式,这篇文章主要给大家介绍了关于vue跳转方式的常见方式以及区别分析的相关资料,需要的朋友可以参考下
    2024-02-02
  • 详解如何去除vue项目中的#——History模式

    详解如何去除vue项目中的#——History模式

    这篇文章主要介绍了详解如何去除vue项目中的#——History模式 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue代码分割的实现(codesplit)

    vue代码分割的实现(codesplit)

    这篇文章主要介绍了vue代码分割的实现(codesplit)，做了代码分割后，会将代码分离到不同的bundle中，然后进行按需加载这些文件，需要的朋友可以参考下
    2018-11-11
  • 深入理解Vue-cli4路由配置

    深入理解Vue-cli4路由配置

    Vue-router是Vue官方的路由插件，本文将结合实例代码，介绍Vue-cli4路由配置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue之请求如何传递参数

    Vue之请求如何传递参数

    这篇文章主要介绍了Vue之请求如何传递参数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • vue2.x select2 指令封装详解

    vue2.x select2 指令封装详解

    本篇文章主要介绍了vue2.x select2 指令封装详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 聊一聊Vue.js过渡效果

    聊一聊Vue.js过渡效果

    这篇文章主要和大家一起聊一聊Vue.js过渡效果、CSS 过渡效果、纯 JavaScript过渡效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • vue项目打包清除console.log的四种方法总结

    vue项目打包清除console.log的四种方法总结

    大家在项目开发的时候,需要看看一些后端接口返回的结果,会多次使用console.log项目开发完成打包的时候,发现控制台一堆的console.log,非常头疼,下面这篇文章主要给大家介绍了关于vue项目打包清除console.log的四种方法,需要的朋友可以参考下
    2023-04-04
  • 强烈推荐!Vue3.2中的setup语法糖

    强烈推荐!Vue3.2中的setup语法糖

    script setup是vue3的新语法糖,并不是新增的功能模块,只是简化了以往的组合式API必须返回(return)的写法,并且有更好的运行时性能,这篇文章主要给大家介绍了关于Vue3.2中setup语法糖的相关资料,需要的朋友可以参考下
    2021-12-12

最新评论