el-input只能填写数字/el-input只能填写字母/el-input只能填写中文/el-input只能填写英文/el-input只能填写标点符号/正则表达式大全

该博客主要介绍了多种限制input输入框输入内容的正则表达式,包括只能输入大小写字母、数字、下划线,只能输入中文、数字、英文等不同情况,还提及不可输入中文、空格以及小数点后位数限制等规则。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.限制input输入框只能输入大小写字母、数字、下划线的正则表达式:

<el-input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 

2.限制input输入框只能输入小写字母、数字、下划线的正则表达式:

<el-input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 

3.限制input输入框只能输入数字和点的正则表达式:

<el-input type="text" onkeyup="value=value.replace(/[^\d.]/g,'')">

4.限制input输入框只能输入中文的正则表达式:

<el-input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">  

5.限制input输入框只能输入数字的正则表达式:

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

6.限制input输入框只能输入英文的正则表达式:

<el-input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">

7.限制input输入框只能输入中文、数字、英文的正则表达式:

<el-input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">  

8.限制input输入框只能输入数字和字母的正则表达式:

<el-inputt onKeyUp="value=value.replace(/[\W]/g,'')">  

9.限制input输入框除了英文的标点符号以外,其他的都可以中文,英文字母,数字,中文标点的正则表达式:

<el-input type="text" onkeyup="this.value=this.value.replace(/^[^!@#$%^&*()-=+]/g,'')">

10.限制input输入框只能输入数字代码(小数点也不能输入)的正则表达式:

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

11.限制input输入框只能输入数字,能输小数点.的正则表达式:

<el-input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">

<el-input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

12限制input输入框只能输入字母和汉字的正则表达式:

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

13.限制input输入框只能输入英文字母和数字,不能输入中文的正则表达式:

<el-input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

14限制input输入框只能输入数字和英文的正则表达式:

<el-input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

15限制input输入框小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号的正则表达式:

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

16.限制input输入框小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:的正则表达式:

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

17,不可输入中文

<el-input  onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')">

18,不可输入空格

<el-input onkeyup="onkeyup="value = value.replace(/\s+/g, '')">

19.只能是数字+小数点且只能保留两位

					<el-input
						onkeyup="value=value.replace(/[^1-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')"
						v-model="state.form.price"
						placeholder="请输入费用标准(自动y保留两位小数)"
						style="width: 92%"
						@change="cccccce"
					/>

### 实现 el-input 组件仅限输入数字字母 为了使 `el-input` 组件仅接受数字字母作为输入,可以利用 Vue 的事件处理机制,在每次用户输入时通过正则表达式过滤掉不符合条件的字符。 对于这种需求,一种常见做法是在 `@input` 事件处理器中修改绑定的数据属性。具体来说,每当检测到输入变化时,使用 JavaScript 正则表达式的 `replace()` 方法去除任何非字母或非数字字符[^1]。 下面是一个具体的例子: ```html <template> <div> <!-- 使用 v-model 双向数据绑定 --> <el-input v-model="filteredValue" @input="handleInput" placeholder="请输入数字字母"> </el-input> </div> </template> <script> export default { data() { return { filteredValue: '' }; }, methods: { handleInput(value) { this.filteredValue = value.replace(/[^a-zA-Z0-9]/g, ''); } } }; </script> ``` 上述代码片段展示了如何创建一个简单的表单控件,它会自动移除所有不是英文字母(大小写均可)或阿拉伯数字的字符。值得注意的是,这种方法不会阻止用户的即时输入行为;相反,当触发 `@input` 事件时才会执行清理逻辑。 另外需要注意的是,如果希望进一步增强用户体验,比如防止非法按键被按下而不是事后修正,则可能需要考虑更复杂的解决方案,如监听键盘事件并拦截特定键位组合[^3]。 #### 处理中文输入法环境下的特殊情况 针对中文输入环境下可能出现的问题——即在未完成拼音拼写前就过早地截断字符串——可以在正则替换之前先判断当前输入是否处于临时状态(composition state)。这通常涉及到对浏览器原生 CompositionEvent 的支持以及相应事件(`compositionstart`, `compositionend`)的捕获[^2]。 ```javascript methods: { handleComposition(event){ if (event.type === 'compositionstart') { this.isComposing = true; } else if (event.type === 'compositionend'){ setTimeout(() => {this.handleInput(this.filteredValue)}, 0); this.isComposing = false; } }, handleInput(value) { if (!this.isComposing) { this.filteredValue = value.replace(/[^a-zA-Z0-9]/g,''); } } } ``` 这样做的好处是可以避免因中文输入过程中产生的中间态文本而误触验证规则,从而提供更加流畅自然的操作体验。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值