Question

如何用jquery验证文本框只能输入字母数字和下划线

Answer 1

由数字、26个英文字母或者下划线组成的字符串可用jquery正则表达式：  /^\w+$/，验证代码为：

 var reg = /^\w+$/;
 if(reg.test($("input:text").val()))
   // 验证通过
 else
   // 验证失败

下面给出实例演示：

1. 创建Html元素

   <div class="box">
   	<span>请输入用户名，限定字母、数字或下划线的组合：</span><br>
   	<div class="content">
   		<input type="text"/>
   	</div>		
   	<input type="button" value="验证">
   </div>

2. 设置css样式

   div.box{width:300px;padding:10px 20px;margin:20px;border:4px dashed #ccc;}
   div.box>span{color:#999;font-style:italic;}
   div.content{width:250px;height:50px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}
   input[type='text']{width:250px;height:40px;padding:0 5px;border:1px solid #6699cc;}
   input[type='button']{height:30px;margin:10px;padding:5px 10px;}

3. 编写jquery代码

   $(function(){
   	// 设置属性值
   	$("input:button").click(function() {
   		var reg = /^\w+$/;
   		// 如果验证失败给出警告
   		if(!reg.test($("input:text").val()))
   			alert("用户名限定为字母、数字或下划线的组合");
   			
   	});
   })

4. 观察效果

   

Answer 2

由数字、26个英文字母或者下划线组成的字符串可用jquery正则表达式：
 /^\w+$/，验证代码为：
 var reg = /^\w+$/;
 if(reg.test($("input:text").val()))
   // 验证通过
 else
   // 验证失败
下面给出实例演示：
创建Html元素
<div class="box">
<span>请输入用户名，限定字母、数字或下划线的组合：</span><br>
<div class="content">
<input type="text"/>
</div>
<input type="button" value="验证">
</div>
设置css样式
div.box{width:300px;padding:10px 20px;margin:20px;border:4px dashed #ccc;}
div.box>span{color:#999;font-style:italic;}
div.content{width:250px;height:50px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}
input[type='text']{width:250px;height:40px;padding:0 5px;border:1px solid #6699cc;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
编写jquery代码
$(function(){
// 设置属性值
$("input:button").click(function() {
var reg = /^\w+$/;
// 如果验证失败给出警告
if(!reg.test($("input:text").val()))
alert("用户名限定为字母、数字或下划线的组合");
});
})
观察效果

Answer 3

<input type="text" onkeyup="var reg = /^[\d\_a-zA-Z]+$/;if(!reg.test(this.value)) this.value='';" />

Answer 4

用keycode应该可以实现限定只能输入数字和下划线