当前位置: 首页 > 编程笔记 >

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

扶誉
2023-03-14
本文向大家介绍javascript使用正则控制input输入框允许输入的值方法大全,包括了javascript使用正则控制input输入框允许输入的值方法大全的使用技巧和注意事项,需要的朋友参考一下

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属性只影响用户可以输入的内容,脚本可将任何文本放入文本字段中.

 类似资料:
  • import { Input } from 'feui'; components: { [Input.name]: Input } 代码演示 基础用法 <fe-group> <fe-input title='value' v-model="value" placeholder="我是占位符"></fe-input> </fe-group> 不可用状态 <fe-group

  • 输入框组件。 Usage 全部引入 import { Input } from 'beeshell'; 按需引入 import { Input } from 'beeshell/dist/components/Input'; Examples iOS 平台 Android 平台支持清空功能 Code 详细 Code import { Input } from 'beeshell'; <Inp

  • Input 输入框 通过鼠标或键盘输入字符 warning Input 为受控组件,它总会显示 Vue 绑定值。 通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。 不支持 v-model 修饰符。 基础用法 demo <el-input v-model="input" placeholder="请输入内容"></el-input

  • radio-group 单项选择器,内部由多个<radio/>组成。 bindchange 类型:EventHandle 默认值:无 说明:<radio-group/> 中的选中项发生变化时触发 change 事件,event.mp.detail = {value: 选中项radio的value} radio 单选项目 在mpvue框架中使用 <template> <div class="pa

  • Input 输入框 1.3.0 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 通过v-model绑定输入框的值 通过type设置输入框的类型 通过border配置是否显示输入框的边框 <template> <u-input v-model="value" :type="type" :border="border"

  • 通过鼠标或键盘输入字符 warning Input 为受控组件,它总会显示 Vue 绑定值。 通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。 不支持 v-model 修饰符。 基础用法 demo <el-input v-model="input" placeholder="请输入内容"></el-input> <script