注册时用户名与弱口令检测

注册用户时，防止用户名、密码过于简单、同用户名一致的问题，jq解决办法
CSS代码：

 #passwordMsg{float: left; font-size: 12px; width: 400px; height: 25px; margin: 4px 0 0 20px;}
 #passwordMsg span{float: left; width: 40px; height: 20px; color: #fff; overflow:hidden; margin-right: 10px; background: #D7D9DD; line-height:20px; text-align: center; }
 #passwordMsg .s1{background: #F45A68;}/*红色*/
 #passwordMsg .s2{background: #fc0;}/*橙色*/
 #passwordMsg .s3{background: #cc0;}/*黄色*/
 #passwordMsg .s4{background: #14B12F;}/*绿色*/
#passErrorMsg{display:none;}

Html代码

 <div class="form-group lgd">
				<label for="username" class="control-label sr-only">用户名：</label>
				<i class="fa fa-user"></i><input type="text" class="form-control" id="username" name="email"  placeholder="用户名" onblur="usernameValidate()"><span id="usernameMsg" style="color:red;display:none"></span>
								</div>
				<div class="form-group lgd">
				<label for="signin-password" class="control-label sr-only">密码:</label>
				<i class="fa fa-unlock-alt"></i><input type="password" name ="password" class="form-control" id="signin-password"  placeholder="密码">
									<div id="passwordMsg" style="display:none"><span id="pass_tip_1">弱</span><span id="pass_tip_2">中</span><span id="pass_tip_3">强</span><span id="pass_tip_4">很强</span></div><span id="passErrorMsg" style="color:red;display:none"></span>
								</div>

Js代码

<script type="text/javascript">
	$(function(){ 
		 //弱密码验证
		 $("#signin-password").keyup(function(){			
			 $("#passwordMsg").css('display','block');
		  //获取用户输入的密码,然后判断其强度 返回0 或者 1 2 3 4
		  var back_num = checkPassWord(this.value);
		
		  for(var i = 1; i <=4; i++){			
			$("#pass_tip_"+i).prop("class","");
		   if(back_num){		   
		    $("#pass_tip_"+back_num).prop("class","s"+ back_num);
		   }
		  }
		  $('#passErrorMsg').css('display','none');
		  $('#submit_btn').attr('disabled',false);
		 });
		 //判断密码是否与用户名相同
		 $("#signin-password").blur(function(){	
			 if(this.value ==$("#username").val()){
				$('#passErrorMsg').css('display','block');
				$('#passErrorMsg').text('密码不能与用户名一样');
				$('#submit_btn').attr('disabled',true);
			 }
		 });
		}); 
	//校验密码强度
	 function checkPassWord(value){
	  var modes = 0;
	  if(/\d/.test(value)){
	   modes++;	 
	  }
	  if(/[a-z]/.test(value)){
	   modes++;
	  }
	  if(/[A-Z]/.test(value)){
	   modes++;
	  }
	  if(/\W/.test(value)){
	   modes++;
	  }
	  return modes;
	 }
	//检测是否存在，当然服务器代码就不上了
	function usernameValidate(){
		$('#usernameMsg').hide();
		var usernameVal = $('#username').val();
		if(usernameVal=='')return;
		CheckUserName(usernameVal)
		var url = "{:U('Register/userExist',array('username'=>'usernameVal'))}";	
		url = url.replace('usernameVal',usernameVal);	
		$.getJSON(url,function(json){
			if(json){
				$('#usernameMsg').html(json.info);
				$('#usernameMsg').show();
			}
		});
	}
	//检测用户名 是否带中文，6-16位之间
	function CheckUserName(name) {
		 var filter  = /^[0-9A-Za-z.@-_]{6,16}$/;
		 if (filter.test(name)) return true;
		 else {
			 $('#usernameMsg').html("用户名不能包含中文和特殊符号，字数在6-16位之间");
				$('#usernameMsg').show();
		 return false;}
		}
	 
	</script>