首先看這下面一段效果
上面的用戶名
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、如果錯誤，就要得到錯誤的字符串，其中實際的空格要轉化成漢字空格，讓人看的清楚