首先看这下面一段效果
上面的用户名
1、只能输入汉字，英文，数字即下划线（_）
2、能够检测错误的字符，将相同的错误字符变成一个
3、将实际上的空格变成汉字的空格
下面就这个代码的全部的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<title>三、用户名验证</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
function yzcode($_val){
var $dx_char = ''; //删掉相同的字符的value
var $ts_char = ''; //特殊字符
var $_val = $('input[type=text]').val(); //获得表单的value
$str_arr = $_val.split(''); //将$_val变成数组
var num = 0; //验证的数字
//将相同的字符转化为空的字符串的数字
(function(){
var len = $_val.length;
for(var i=0;i<len;i++){
for(var j=len;j>i;j--){
if($str_arr[i] == $str_arr[j]){
$str_arr[j]="";
}
}
}
})();
//将相同的字符除掉的数组变成字符串
(function(){
for(var i=0;i<$str_arr.length;i++){
$dx_char += $str_arr[i];
}
})();
for(var i=0;i<$dx_char.length;i++){ //进行验证
num += (/[^\u4e00-\u9fa5]/ig.test($dx_char[i])&&/\W/ig.test($dx_char[i]));
}
if(num!=0){
for(var i=0;i<$dx_char.length;i++){ //获取验证错误的字符
if(/[^\u4e00-\u9fa5]/ig.test($dx_char[i])&&/\W/ig.test($dx_char[i])){
if($dx_char[i]==' '){
$dx_char[i]='空格';
$ts_char = $ts_char+'空格';
}else{
$ts_char += $dx_char[i];
}
}
}
$('.level').html('用户名有特殊符号"<strong style="color:#d00;">' + $ts_char+'</strong>",请从新输入').css('color','#999');
}else if(num==0){
$('.level').html('√').css('color','#080');
}
}
//yzcode();
$('input[type=text]').bind('change keyup blur fucos',function(){
yzcode($(this).val);
});
})
</script>
</head>
<body>
<h2>下面先检查字符串的合乎规范，然后检测错误</h2>
<label>用 户 名：<input type="text" maxlength="25" min="6" name="" id="" value=""/> <span class="level" style="color:#999">用户名不少于两位且只能为汉字、英文、数字及_</span></label>
</body>
</html>
实现具体思路
1、获取到的表单value，将每个字符拆分成数组
2、将相同的数组的元素剔除掉
3、将每一个数组的元素单独去验证得到的boolean值，去转化为数值叠加去验证。
如果是等于0，那么就正确，如果不等于0就错误
4、如果错误，就要得到错误的字符串，其中实际的空格要转化成汉字空格，让人看的清楚