正则表达式限制文本框只能输入数字,小数点,英文字母,汉字及其组合

文本框输入限制技巧
本文介绍了多种使用HTML和JavaScript限制文本框输入内容的方法,包括仅允许数字、字母、中文字符等,以及组合限制条件实现复杂输入验证。

1.文本框只能输入数字代码(小数点也不能输入)
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

2.只能输入数字,能输小数点.
<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='';}">

3.数字和小数点方法二
<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}">

4.只能输入字母和汉字
<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">

5.只能输入英文字母和数字,不能输入中文
<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

6.只能输入数字和英文<font color="Red">chun</font>
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

7.小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

8.小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:
<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

用JS的正则表达式如何判断输入框内为中文或者是英文数字,或者是三者混编:
1.只能输入数字和英文的:
<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
2.只能输入数字的:
<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
3.只能输入全角的:
<input onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))">
4.只能输入汉字的:
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">

也可以这样:
<input type=text name= caolig value ="" onblur="if (!(/^[\d]+\.?\d*$/.test(this.value)) ){alert('您的输入有误'); this.value='';this.focus();}">  
5>.
文本框里只能输入特定的字付的和文本框里不能右键弹

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
只能输入数字
<br>
<input name="text" type="text" id="NewPage"
onKeyUp="this.value=this.value.replace(/\D/g,'')"
onafterpaste="this.value=this.value.replace(/\D/g,'')" >
<br>
只能输入英文和数字
<br>
<input name="text1" maxlength="13" onKeyUp="value=value.replace(/[^a-zA-Z0-9]/g,'')" onMouseOver="value=value.replace(/[^a-zA-Z0-9]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^a-zA-Z0-9]/g,''))">
<br>
只能输入中文
<br>
<input type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
<br>
<br>
实验成功
<br>只能输入数字<br>
<input type=text onkeyup="this.value=this.value.replace(/\D/g,'')">

<br>只能输入数字<br>
<input type="text" onkeyup="value=value.replace(/\D/g,'')">

<br>只能输入大小写英文<br>
<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')">

<br>只能输入大小定英文和数字<br>
<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">

<br>只能输入中文<br>
<input type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">

<br>只能输入大小定中文、英文和数字和@符号和.符号<br>
<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'')">

<br>只允许输入大小写英文,且不能粘贴也无法弹出粘贴菜单<br />
<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="return false" oncontextmenu = "return false"/>

<br><br>
只能输入数字和点号(注意:在[^\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换成你想输入的代码就可以了,中文u4E00-u9FA5数字d英文a-z\A-Z其它符号@,点或其它符号.也可 以多个,用\隔开就行了.例如中英文和数字加@符号加点符号\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.
若想在文本框里不能右键弹出菜单和不能粘贴进复制的信息的话
就要在<input>里输入 onKeyDown="fncKeyStop(event)" onpaste="return false" oncontextmenu="return false;"
</body>
</html>

<think>我们已经从引用资料中获得了EasyUI中使用正则表达式进行文本框校验的实现方法。 用户需求:使用EasyUI的文本框,结合正则表达式,仅允许输入数字和英文(即0-9, a-z, A-Z)。 引用[1]和[4]提供了类似的自定义校验规则示例,我们可以参考它们来编写一个校验规则。 步骤: 1. 在HTML中,给文本框设置一个validType属性,值为我们自定义的校验规则名称(例如:alphanum)。 2. 在JavaScript中,使用`$.extend`扩展`$.fn.validatebox.defaults.rules`,定义名为`alphanum`的校验规则。 校验规则中: - validator函数:使用正则表达式测试输入值。正则表达式应该匹配数字英文字母(大小写)。 - message:校验失败时的提示信息。 正则表达式:要求整个字符串都由数字英文字母组成。可以使用:`/^[0-9a-zA-Z]*$/`。 - `^` 表示字符串开始 - `[0-9a-zA-Z]*` 表示0个或多个数字或字母(大小写) - `$` 表示字符串结束 注意:如果允许为空(即可以不输入),则使用`*`(0个或多个);如果要求至少输入一个字符,则使用`+`(1个或多个)。但根据用户需求,仅允许输入数字和英文,所以空字符串是否允许?通常我们可能允许为空(因为输入框可能非必填),但用户需求未明确,我们可以按允许空字符串处理(即0个或多个)。如果要求必填,可以在其他地方设置(比如设置required属性)。 实现代码: HTML部分: <input id="txtInput" class="easyui-textbox" validType="alphanum"> JavaScript部分(在页面加载完成后,一般在ready函数中): $.extend($.fn.validatebox.defaults.rules, { alphanum: { validator: function(value){ // 使用正则表达式,如果输入为空也通过(因为允许空字符串),否则检查是否只包含数字和字母 return /^[0-9a-zA-Z]*$/.test(value); }, message: '只能输入数字英文字母' } }); 另外,引用[1]中有一个数值校验(isNum)使用的是isNaN函数,但注意:isNaN函数会允许小数点、负数符号等,所以不符合需求。引用[4]中使用了中文字符的范围,但我们不需要中文,所以排除。 因此,我们定义一个新的校验规则alphanum,然后将其应用到文本框的validType属性即可。 注意:如果用户需要同时满足其他校验(比如必填),可以设置required属性,并在validType中设置多个校验规则(数组形式),例如:validType=['alphanum', 'length[0,20]']。 例如,要求必填且只能输入数字和字母,并限制长度在6到20之间: <input class="easyui-textbox" required="true" validType="length[6,20], alphanum"> 但是,根据用户需求,这里只需要限制输入数字和英文。 下面给出完整示例: </think>基于引用资料,以下是使用 EasyUI 结合正则表达式实现文本框**仅允许输入数字和英文**的完整代码实现: ### 一、HTML 部分 ```html <input id="alphanumInput" class="easyui-textbox" validType="alphanum"> ``` ### 二、JavaScript 部分 ```javascript // 扩展自定义验证规则 $.extend($.fn.validatebox.defaults.rules, { alphanum: { // 自定义规则名称 validator: function(value) { // 正则表达式:仅允许数字英文字母(大小写) return /^[0-9a-zA-Z]*$/.test(value); }, message: '仅允许输入数字英文字母' // 验证失败的提示 } }); ``` ### 关键技术解析 1. **正则表达式核心** `^[0-9a-zA-Z]*$` 含义: - `^`:匹配字符串开头 - `[0-9a-zA-Z]`:匹配数字0-9或字母a-z/A-Z - `*`:允许0个或多个字符(空输入可通过验证) - `$`:匹配字符串结尾 2. **EasyUI 集成机制** - 通过 `$.extend` 扩展 `validatebox` 的默认规则(引用[1][2][4]) - `validType="alphanum"` 绑定自定义规则到输入框(引用[1][3]) - 输入时自动触发正则验证,非法字符即时拦截(引用[3]) 3. **特殊场景处理** - **禁止输入中文**:明确排除 `\u4e00-\u9fa5` 中文字符集(与引用[4]对比) - **空值处理**:`*` 量词允许空字符串通过(若需必填,添加 `required:true` 属性) - **大小写支持**:`a-zA-Z` 覆盖所有英文大小写字母 ### 完整示例 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head> <body> <input id="alphanumInput" class="easyui-textbox" validType="alphanum"> <script> $(function(){ $.extend($.fn.validatebox.defaults.rules, { alphanum: { validator: function(v){ return /^[0-9a-zA-Z]*$/.test(v); }, message: '非法输入只能包含数字英文字母' } }); }); </script> </body> </html> ``` ### 效果说明 1. 用户输入中文(如`中文`)或符号(如`@#$`)时,输入框显示红色边框并提示预设错误信息 2. 合法输入示例:`abc123`, `HelloWorld`, `2024` 3. 焦点移出输入框时自动触发验证(符合引用[3]的交互逻辑) > 提示:若需要**强制大写字母**,可将正则改为 `^[0-9A-Z]*$`;若需**禁止数字**,改为 `^[a-zA-Z]*$` 即可
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值