JavaScript表单输入限制与正则表达式实战指南
本文整理了JavaScript中常用的表单输入限制方案，涵盖纯数字、含小数点数字、字母、汉字及混合字符的输入控制。通过onkeyup、onkeypress等事件结合正则表达式，实现禁止特殊字符、空格及非法粘贴的功能，并提供关闭中文输入法的技巧，帮助开发者快速实现精确的前端输入验证。
JavaScript表单输入限制与正则表达式实战指南
本节整理JavaScript中用于限制文本框输入内容的正则表达式，包括仅允许数字、数字与字母组合等常见场景。
纯数字与含小数点数字输入限制
实现文本框仅允许输入数字代码，禁止输入小数点。
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> 实现文本框仅允许输入数字，但允许输入小数点。
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}"> 另一种限制数字和小数点输入的方法。
<input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else 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;else 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;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">字母、汉字及混合字符输入控制
实现文本框仅允许输入字母和汉字。
<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers"> 实现文本框仅允许输入英文字母和数字，禁止输入中文。
<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
实现文本框仅允许输入数字和英文<font color="Red">chun</font>。
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">
限制小数点后最多两位，允许输入数字和中文，禁止输入字母和运算符号。
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false"> 限制小数点后最多两位，允许输入数字、字母和中文，并允许输入运算符号。
<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">
特殊字符、空格及非法粘贴禁止
禁止输入特殊字符的验证方法。
onKeyPress="if(event.keyCode < 45 || event.keyCode > 57 ) event.returnValue = false;"
实现文本框仅允许输入汉字。
<input onkeyup="value=value.replace(/[^/u4E00-/u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/u4E00-/u9FA5]/g,''))">通过设置style="ime-mode:disabled"来禁止调用汉字输入法。
实现文本框仅允许输入数字。
<input onkeyup="value=value.replace(/[^/d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">实现文本框仅允许输入英文和数字。
<input onkeyup="value=value.replace(/[/W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">控制输入框仅允许输入文字或数字，同时禁止输入特殊字符。
在此处禁止输入如 ^&* 等特殊字符。<br>
<textarea rows=2 cols=20 name=comments onKeypress="if ((event.keyCode > 32 && event.keyCode < 48) || (event.keyCode > 57 && event.keyCode < 65) || (event.keyCode > 90 && event.keyCode < 97)) event.returnValue = false;">仅禁止空格输入的方法。
onkeyup="value=value.replace(//s/g,'')"
onkeydown="if(event.keyCode==32) return false"
实现文本框仅允许输入中文和英文。
onkeyup="value=value.replace(/[^/a-zA-Z/u4E00-/u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/a-zA-Z/u4E00-/u9FA5]/g,''))"禁止输入特殊字符和空格。
<input id="code" onkeypress="return ValidateSpecialCharacter();" onblur="validate(this)"/>
空值校验与复杂格式验证
实现输入框不能为空的验证。
<input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')">
判断字符是否由字母、数字、下划线和点号组成，且开头必须是下划线或字母。
/^([a-zA-z_]{1})([\w]*)$/g.test(str)
实现仅允许输入数字。
<input name="text" type="text" id="NewPage" onKeyUp="value=value.replace(/\D/g,'')" onafterpaste="value=value.replace(/\D/g,'')" >实现仅允许输入中文。
<input type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
实现仅允许输入英文。
<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')">
<input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')">实现仅允许输入中文、英文、数字、@符号和点号。
<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'')">
只允许输入英文，同时禁止粘贴操作及弹出粘贴菜单。
<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="return false" oncontextmenu = "return false"/>仅允许输入数字和点号（注意：在[^\d\.]中d不能写成大写D，否则将匹配除数字外的所有字符）。
<input name="price" type="text" size="8" maxlength="8" onkeyup="value=value.replace(/[^\d\.]/g,'')" >通用正则替换技巧与输入法控制
总结：先在<input>标签中输入onkeyup="value=value.replace(/[^\X]/g,'')"，然后将(/[\X]/g,'')中的X替换为你希望允许输入的代码即可。
汉字的Unicode范围：u4E00-u9FA5。
数字的表示：d、0-9。
英文字母的范围：a-z、A-Z。
其他符号如@、点号等，若需多个符号，使用\隔开即可。
例如：
中、英文、数字、@符号及点号的组合正则：\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.
若需禁止在文本框中右键弹出菜单及粘贴复制信息，需在<input>中添加 onKeyDown="fncKeyStop(event)" onpaste="return false" oncontextmenu="return false;"。
第一种情况，仅允许输入数字和小数点。
<input onKeypress="return (/[/d.]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled">第二种情况，进行更详细的判断，甚至能识别出如22..2这类不符合数字规范的输入。
<script>
function check(){
if (isNaN(tt.value))
{alert("非法字符！");
tt.value="";}
}
</script>
<input type="text" name="tt" onkeyup="check();">第三种情况，仅允许输入整数。实际上可根据第三种情况举一反三，实现其他限制。
<script language=javascript>
function onlyNum()
{
if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39))
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
event.returnValue=false;
}
</script><input onkeydown="onlyNum();" style="ime-mode:Disabled> 结语，其实
style="ime-mode:Disabled
这句代码比较实用，意为关闭输入法。这样可以避免用户开启全角模式输入数字导致无法输入的情况，减少用户因设计问题产生的抱怨。
仅允许输入数字。
<input name="username" type="text" onkeyup="value=this.value.replace(//D+/g,'')">
仅允许输入英文字母、数字和下划线（以下提供两种实现方法）。
<input name="username" type="text" style="ime-mode:disabled">
<input name="username" type="text" onkeyup="value=value.replace(/[^/w/.//]/ig,'')">仅允许输入英文字母、数字和&=@符号。
<input name="username" type="text" onkeyup="value=value.replace(/[^/w=@&]|_/ig,'')">
仅允许输入英文字母、数字和&=@符号。
<input name="username" type="text" onkeyup="value=value.replace(/[^/w=@&]|_/ig,'')">
仅允许输入汉字。
<input name="username" type="text" onkeyup="value=value.replace(/[^/u4E00-/u9FA5]/g,'')">
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗？let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解：基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13