<!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>
