源碼在這 css 在下面 有用的同學拿去參考 唯一有遺憾的就是EM 加不上類名 好困惑 有同學解決請聯(lián)系我
<!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 數(shù)字，不分大小寫，字母 下劃線。
? ? ? //2 最大長度16 最小長度2
? ? ? ?var re=/[^\w\u4e00-\u9fa5]/g;
? ? ? yhm.onfocus=function(){
? ? ? ? ?yhm_p.style.display="block";
? ? ? ? ?yhm_p.innerHTML='<i></i>2到12個字符，使用字母、數(shù)字和下劃線';
? ? ? ? ?
? ? ? };
? ? ? 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位數(shù)字和字母或符號的組合，不能單獨使用字母或數(shù)字。';
? ? ? };
? ? ?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 不能全數(shù)字，不能全字母
? ? ? ? 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;
}
? ?
