源码在这 css 在下面 有用的同学拿去参考 唯一有遗憾的就是EM 加不上类名 好困惑 有同学解决请联系我
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../denglu/css/clear.css">
<link rel="stylesheet" href="../denglu/css/main.css">
<script>
window.onload=function(){
var ints=document.getElementsByTagName("input");
var yhm=ints[0];
var pass=ints[1];
var pass2=ints[2];
var email=ints[3];
var ap=document.getElementsByTagName("p");
var yhm_p=ap[0];
var pass_p=ap[1];
var pass2_p=ap[2];
var email_p=ap[3];
var b=document.getElementById("cont");
var aem=document.getElementsByTagName("em");
var em1=aem[0],
em2=aem[1],
em3=aem[2];
var name_len=0;
//1 数字，不分大小写，字母 下划线。
//2 最大长度16 最小长度2
var re=/[^\w\u4e00-\u9fa5]/g;
yhm.onfocus=function(){
yhm_p.style.display="block";
yhm_p.innerHTML='<i></i>2到12个字符，使用字母、数字和下划线';
};
yhm.onkeyup=function(){
b.style.visibility="visible";
name_len=getlength(yhm.value);
b.innerHTML=name_len+'个字符';
};
yhm.onblur=function(){
//不能为空
if(yhm.value==""){
yhm_p.innerHTML='<i></i>不能为空';
}
//不能有非法字符
else if(re.test(this.value)){
yhm_p.innerHTML='<i></i>不能使用非法字符!';
}
//最大程度不能超过16
else if(name_len>16){
yhm_p.innerHTML='<i></i>最大程度不能超过16!';
}
//最小长度不能低于2
else if(name_len<2){
yhm_p.innerHTML='<i></i>最小长度不能少于2!';
}
//成功
else{
yhm_p.innerHTML='<i></i>成功!';
}
}
pass.onfocus=function(){
pass_p.style.display="block";
pass_p.innerHTML='<i></i>2-12位数字和字母或符号的组合，不能单独使用字母或数字。';
};
pass.onkeyup=function(){
//长度大于6为中
if(this.value.length>6){
pass2.removeAttribute("disabled");
pass2_p.display="block";
pass2_p.innerHTML='<i></i>请再次输入密码';
}else{
pass2.setAttribute("disabled");
pass2.display="none";
}
//大于12位为高
};
pass.onblur=function(){
var m=findstr(pass.value,pass.value[0]);
//1 密码不能为空
if(pass.value==""){
pass_p.innerHTML='<i></i>请输入密码';
}
//2 不能有三个重复字符
//3 不能全数字，不能全字母
else if(m==pass.value.length){
pass_p.innerHTML='<i></i>不能全部使用相同的字符';
}
//4 长度为6-16位
else if(pass.value.length<6||pass.value.length>12){
pass_p.innerHTML='<i></i>密码长度应该在6位和12位之间';
}else{
pass_p.innerHTML='<i></i>成功';
}
}
pass2.onfocus=function(){
pass2_p.style.display="block";
}
pass2.onblur=function(){
if(pass2.value==""){
pass2_p.innerHTML='<i></i>请再次输入密码';
}
else if(pass2.value==pass.value){
pass2_p.innerHTML='<i></i>成功';
}else{
pass2_p.innerHTML='<i></i>确认密码与密码不一致，请重新输入';
}
}
email.onfocus=function(){
email_p.style.display="block";
email_p.innerHTML='<i></i>请输入常用邮箱';
}
email.onblur=function(){
if(email.value==""){
email_p.innerHTML='<i></i>邮箱不能为空';
}else if(email.value.indexOf("@",0)==-1){
email_p.innerHTML='<i></i>邮箱格式不正确';
}else if(email.value.indexOf(".",0)==-1){
email_p.innerHTML='<i></i>邮箱格式不正确';
}else{
email_p.innerHTML='<i></i>成功';
}
}
}
function getlength(str){
return str.replace(/[^\x00-xff]/g,"xx").length;
}
function findstr(str,n){
var stm=0;
for(var i=0;i<str.length;i++){
if(str.charAt(i)==n){
stm++;
}
}
return stm;
}
</script>
</head>
<body>
<div>
<div class="header clearfix">
<div class="logo fl">
<img src="../denglu//image/logo.png">
</div>
<div class="login fr">
<a href="#" class="dl fl">登录</a>
<span> | </span>
<a href="#" class="zc fr">注册</a>
</div>
</div>
<form method="post" action="#" id="demoform">
<h3>新用户注册</h3>
<div><label><span>用户名</span><input type="text"></label><p><i></i>请输入2到16位字符</p></div>
<div style="padding-left:80px"><label><span><b id="cont"></b></span></label></div>
<div style="margin:3px 0 14px 0"><label><span>密码</span><input type="password"></label><p><i></i>请输入2到16位字符</p></div>
<div style="margin:3px 0 14px 0"><label><span>确认密码</span><input type="password" disabled=""></label><p><i></i>请输入2到16位字符</p></div>
<div><label><span>邮箱</span><input type="email"></label><p><i></i>请输入2到16位字符</p></div>
<a href="#">注册</a>
</form>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------
//以下为css代码
body{
background: #e5e8ec;
}
.top{
width: 100%;
}
.header{
width: 1000px;
margin: 0 auto;
height: 100px;
background: #fff;
}
.header .logo{
margin: 20px 0 0 20px;
}
.header .login{
height: 10px;
margin-right: 30px;
margin-top: 50px;
}
#demoform{
margin:100px auto;
width:600px;
height:350px;
background:#fff;
padding:15px 0 0 200px;
}
#demoform h3{
font-size:20px;
margin:20px auto;
font-family:"微软雅黑";
}
#demoform div{
overflow:hidden;
clear:both;
}
#demoform label{
float:left;
clear:both;
}
#demoform div label .text{
width:200px;
height:30px;
padding:0 5px;
border:1px solid #ccc;
}
#demoform label b{
font-size:14px;
font-weight:normal;
color:#999;
visibility:hidden;
}
#demoform div em{
display:inline-block;
font-size:14px;
font-style:normal;
font-weight:normal;
color:#333;
text-align:center;
vertical-align:middle;
background:#ffd099;
width:68px;
height:15px;
line-height:15px;
}
form div .ys{
background-color:#ff6600;
}
#demoform span{
display:inline-block;
width:80px;
font-size:16px;
text-align:right;
margin-right:10px;
}
.msg{
line-height:18px;
color:#999;
float:left;
padding:5px 0 0 18px;
display:none;
}
.info{
display:inline-block;
width:20px;
height:20px;
background:url(../image/info.png) left center no-repeat;
padding-right:5px;
float:left;
}
.error{
display:inline-block;
width:20px;
height:20px;
background:url(../image/error.png) left center no-repeat;
padding-right:5px;
float:left;
}
.success{
display:inline-block;
width:20px;
height:20px;
background:url(../image/success.png) left center no-repeat;
padding-right:5px;
float:left;
}
.sub {
display:block;
width:200px;
height:30px;
line-height:30px;
background:#6effa6;
overflow:hidden;
font-size:16px;
font-family: "微软雅黑";
color:#fff;
border-radius:20px;
text-align:center;
vertical-align:middle;
margin:20px 0 0 95px;
}
