表单验证

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.msg{ display:none;}
	#count{ visibility:hidden;}
	.ative{ background:pink;}
</style>
<script>
//判断字符串是不是 同一字符
function findstr(str,n){
	var tmp = 0;
	for(var i=0; i<str.length; i++){
		if(str.charAt(i)==n){
			tmp++;
		}
	}
	return tmp;
}

//返回字符串的长度
function geiLength(str){
	return str.replace(/[^\x00-xff]/g,"xx").length;
}

window.onload=function(){
	var op = document.getElementsByTagName('p'),
		onamep = op[0],
		opwd1p = op[1],
		opwd2p = op[2];
	var count = document.getElementById('count');
	var text = document.getElementById('text');
	var password1 = document.getElementById('password1');
	var password2 = document.getElementById('password2');
	var ems = document.getElementsByTagName('em');
	var nameLength = 0;
	
	//用户名
	text.onfocus=function(){ //获得焦点时发生
		onamep.style.display = 'block';
	}
	
	text.onkeyup=function(){ //键盘按键被松开时发生
		count.style.visibility = 'visible';
		nameLength = geiLength(this.value);
		count.innerHTML = nameLength + '个字符';
		
		if(nameLength==0){
			count.style.visibility = 'hidden';
		}
	}
	
	text.onblur=function(){ //失去焦点时发生
		
		var re = /[^\w\u4e00-\u9fa5]/g;  
		
		if(re.test(this.value)){    //含有非法字符	
			onamep.innerHTML = '<i class="err"></i>含有非法字符!';
		}else if(this.value==""){   //不能为空	
			onamep.innerHTML = '<i class="err"></i>不能为空!';
		}else if(nameLength > 25){  //长度不超过25个字符	
			onamep.innerHTML = '<i class="err"></i>长度不超过25个字符!';
		}else if(nameLength < 6){   //长度不少于6个字符
			onamep.innerHTML = '<i class="err"></i>长度不少于6个字符!';
		}else{                     //ok
			onamep.innerHTML = '<i class="ok"></i>ok';
		}
	}
	
	//密码
	password1.onfocus=function(){  //获得焦点
		opwd1p.style.display = 'block';
		opwd1p.innerHTML = '<i class="err"></i>6-16个字符,对密码的要求';
	}
	password1.onblur=function(){   //失去焦点
		
		var m = findstr(this.value,this.value[0]);
		var re_n = /[^\d]/g;   //匹配的非数字
		var re_t = /[^a-zA-Z]/g;
		
		if(this.value==''){//不能为空
			opwd1p.innerHTML = '<i class="err"></i>不能为空';
		}else if(m==this.value.length){ //不能用相同字符
			opwd1p.innerHTML = '<i class="err"></i>不能用相同字符';
		}else if(this.value.length<6 || this.value.length>16){ //长度为6-16字符
			opwd1p.innerHTML = '<i class="err"></i>长度为6-16字符';
		}else if(!re_n.test(this.value)){ //不能全为数字
			opwd1p.innerHTML = '<i class="err"></i>不能全为数字';
		}else if(!re_t.test(this.value)){ //不能全为字母
			opwd1p.innerHTML = '<i class="err"></i>不能全为字母';
		}else{     //ok
			opwd1p.innerHTML = '<i class="err"></i>ok';
		}
		
		
		
	}
	password1.onkeyup=function(){  //松开鼠标按键时
		if(this.value.length > 5){   //大于5个字符为 中
			ems[1].className = 'ative';
			password2.removeAttribute('disabled');
			opwd2p.style.display = 'block';
		}else{
			ems[1].className = '';
			password2.setAttribute('disabled');   //setAttribute存在浏览器兼容问题
			opwd2p.style.display = 'none';
		}
		//大于10个字符为  强
		if(this.value.length > 10){   //大于5个字符为 中
			ems[2].className = 'ative';
		}else{
			ems[2].className = '';
		}
	}
	
	//确认密码
	password2.onblur=function(){   //失去焦点
		if(this.value != password1.value){
			opwd2p.innerHTML = '<i class="err"></i>两次密码不一样';
		}else{
			opwd2p.innerHTML = '<i class="err"></i>ok';
		}
	}
}
</script>
</head>

<body>
	<form>
    	<div>
        	<label>
            	<span> 会员名:</span>
                <input type="text" class="text" id="text">
            </label>
            <p class="msg"><i class="ati"></i>5-25个字符,一个汉字为两个字符,推荐使用中文会员名</p>
        </div>
        
        <div>
        	<label>
            	<span></span>
                <b id="count">0个字符</b>
            </label>
        </div>
        
        <div>
        	<label>
            	<span>登陆密码:</span>
                <input type="password" class="text" id="password1">
            </label>
            <p class="msg"><i class="err"></i>5-25个字符,一个汉字为两个字符,推荐使用中文会员名</p>
        </div>
        
        <div style="margin:3px 0 10px 0">
        	<label>
            	<span></span>
                <em class="active">弱</em>
                <em class="active">中</em>
                <em class="active">强</em>
            </label>
        </div>
        
        <div style="margin-bottom:20px;">
        	<label>
            	<span>确认密码:</span>
                <input type="password" class="text" disabled="" id="password2"/>
            </label>
            <p class="msg"><i class="ati"></i>请再一次输入</p>
        </div>
        
        <div>
        	<label>
            	<span>验证码:</span>
                <input type="text" class="text" style="width:50px">
                <img src="">
                <a class="changelmg" href="javascript:;" title="重新获取验证码"></a>
            </label>
        </div>
        
        <div>
        	<input class="submitBtn btn" type="submit" value="同意协议并注册" />
        </div>
    </form>
</body>
</html>

  

posted @ 2015-04-17 15:28  背包旅行的蚂蚁  阅读(114)  评论(0编辑  收藏  举报