今天碰到一个小问题,要求限制文本框输入类型,特地分享给大家,文本框类型限制主要靠正则表达式。下面是我查找总结整理的例子。具体输入要求可以自己查一下正则表达式。
这里用到一个JavaScript 的String 对象replace方法。
<h1>js验证输入框内容</h1>
<br />
<br />
只能输入0和1
<input type="text" οnkeyup="value=value.replace(/[^01]/g,'')">
<br />
<br />
只能输入英文
<input type="text" οnkeyup="value=value.replace(/[^a-zA-Z]/g,'')">
<br />
<br />
只能输入英文,<pre name="code" class="html">无法粘贴,右键不会弹出粘贴菜单
<input type="text" οnkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" οnkeydοwn="fncKeyStop(event)" οnpaste="return false" οncοntextmenu="return false" /><br /><br />只能输入数字:<input οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"><br /><br />只能输入数字,小数点:<input name="price" type="text" οnkeyup="value=value.replace(/[^\d\.]/g,'')"><br /><br />只能输入数字,小数点,下划线:<input name="price" type="text" οnkeyup="value=value.replace(/[^\d\._]/g,'')"><br /><br />只能输入英文和数字:<input οnkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"><br /><br />只能输入汉字:<input οnkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"><br /><br />禁止输入法输入:<input type="text" style="ime-mode: disabled">无法切换输入法<br /><br />只能输入中文、英文、数字、@符号和.符号:<input type="text" οnkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'')"><br /><br />不能为空:<input οnblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"><br /><br />
但是当放到单独的js,要注意。这里需要用到jQuery 事件 - bind() 方法。bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
以下是我的js代码,仅供参考
var init = function(){
document.getElementB
document.getElementById("inits").style.display="none";
var input = document.getElementsByTagName("input").length;
var length = input/7;
for(var i=0;i<length;i++){
document.getElementById('S'+(i+1).toString()).value;
if(document.getElementById('S'+(i+1).toString()).value == '1'){
//document.getElementById('add'+(i+1).toString()).placeholder="格式为字母或数字的组合。";
$('#add'+(i+1).toString()).bind("mouseover",function(){
this.value = this.value.replace(/[^\d]/g,'');
});
}else if(document.getElementById('S'+(i+1).toString()).value == '2'){
//document.getElementById('add'+(i+1).toString()).placeholder="是请输入1,否请输入0。";
$('#add'+(i+1).toString()).bind("mouseover",function(){
this.value = this.value.replace(/[^01]/g,'');
});
}else{
document.getElementById('add'+(i+1).toString()).disabled=true;
document.getElementById('add'+(i+1).toString()).placeholder="禁止输入!";
}
}
}
附正则表达式:
[\u4e00-\u9fa5] //匹配中文字符 ^[1-9]\d*$ //匹配正整数 ^[A-Za-z]+$ //匹配由26个英文字母组成的字符串 ^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串 ^[a-z]+$ //匹配由26个英文字母的小写组成的字符串 ^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串