javascript使用正则控制input输入框允许输入的值方法大全

 更新时间:2014年06月19日 09:16:16   投稿:hebedich  
在做项目的时候,我们经常会遇到控制input输入框允许输入的值为数字,字母,汉字或者混排的情况,那么我们怎么来处理呢,下面我们就来探讨怎么通过用javascript正则来实现

1、只允许输入数字

<input name="username" type="text" onkeyup="value=this.value.replace(/\D+/g,'')">

2、只允许输入英文字母、数字和下划线(以下二种方法实现)

<input name="username" type="text" style="ime-mode:disabled">
<input name="username" type="text" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

3、只允许输入英文字母、数字和=@#

<input name="username" type="text" onkeyup="value=value.replace(/[^\w=@#]|_/ig,'')">

4、只允许输入英文大写字母和数字

<input name="name" type="text" value="只录入大写字母和数字" style="color:gray" onfocus="this.value='';this.style.color='black'" onkeyup="this.value=this.value.replace(/[^A-Z0-9]/gi,'');this.value=this.value.toLocaleUpperCase();

5、只允许输入汉字

<input name="username" type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">

【过滤文字输入】

TextField.restrict = "此处为可输入的内容";
field.restrict = "^此处为禁止输入的内容";

restrict属性支持一些类似正则表达式的样式:

field.restrict = "a-zA-z"; //只允许大小字母
field.restrict = "a-zA-z "; //只允许字母和空格
field.restrict = "0-9"; //只允许数字
field.restrict = "^abcdefg"; //除了小写字母abcdefg不允许外,其它都允许
field.restrict = "^a-z"; //所有小写字母都不允许,但是,其它内容都允许,包括大写字母
field.restrict = "0-9^5"; //只允许数字,但5例外

让restrict字符包含具有特殊意义的字母(例如-和^):

field.restrict = "0-9\\-"; //允许数字和破折号
field.restrict = "0-9\\^"; //允许数字和^
field.restrict = "0-9\\\\"; //允许数字和反斜杠

你也可以使用Unicode转义序列,指定允许的内容.例如:

field.restrict = "^\u001A";

注意:ActionScript有区分大小写的,如果restrict属性设为abc,允许字母的大写形式(A,B和C)输入时会变成小写对待形式(a,b和c),反之亦然.restrict属性只影响用户可以输入的内容,脚本可将任何文本放入文本字段中.

相关文章

  • 完美兼容多浏览器的js判断图片路径代码汇总

    完美兼容多浏览器的js判断图片路径代码汇总

    本文给大家汇总分享了几种使用javascript实现判断图片路径是否存在的代码,都是平时项目中用到过的,这里总结一下,有需要的小伙伴可以参考下。
    2015-04-04
  • jQuery实现动态添加、删除按钮及input输入框的方法

    jQuery实现动态添加、删除按钮及input输入框的方法

    这篇文章主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2017-04-04
  • 前端将dom转换成图片的方法(使用dom-to-image)

    前端将dom转换成图片的方法(使用dom-to-image)

    这篇文章主要介绍了使用轻量级的dom-to-image插件将DOM元素转换为图片并下载,该插件支持多种图片格式,如SVG、PNG、JPEG等,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • 纯js实现html转pdf的简单实例(推荐)

    纯js实现html转pdf的简单实例(推荐)

    下面小编就为大家带来一篇纯js实现html转pdf的简单实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 5个你不知道的JavaScript字符串处理库(小结)

    5个你不知道的JavaScript字符串处理库(小结)

    这篇文章主要介绍了5个你不知道的JavaScript字符串处理库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • JavaScript获取flash对象与网上的有所不同

    JavaScript获取flash对象与网上的有所不同

    关于js获取flash对象,网上有非常多的例子,但不是我想要的,经测试整理,因此本文诞生了
    2014-04-04
  • 浅谈es6语法 (Proxy和Reflect的对比)

    浅谈es6语法 (Proxy和Reflect的对比)

    下面小编就为大家带来一篇浅谈es6语法 (Proxy和Reflect的对比)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • jquery实用技巧之输入框提示语句

    jquery实用技巧之输入框提示语句

    输入有效信息时会有一些提示语,比如“请输入用户名”和“请输入密码”等语言,这篇文章就为大家介绍js实用技巧之输入框提示语句的实现方法,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • BootStrapTable 单选及取值的实现方法

    BootStrapTable 单选及取值的实现方法

    学习bootstrapTable 一直没有找到 单选框的选定的和取值的教程,接下来通过本文给大家分享BootStrapTable 单选及取值的实现方法,非常不错,需要的朋友参考下
    2017-01-01
  • JS 仿支付宝input文本输入框放大组件的实例

    JS 仿支付宝input文本输入框放大组件的实例

    下面小编就为大家带来一篇JS 仿支付宝input文本输入框放大组件的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论