console
function fun(){
var zh=document.getElementById("zh"),
mm=document.getElementById("mm"),
yhm=document.getElementById("yhm"),
yzm=document.getElementById("yzm"),
zhts=document.getElementById("zhts"),
mmts=document.getElementById("mmts"),
yhts=document.getElementById("yhts"),
yzts=document.getElementById("yzts");
if(zh.value==""){
zhts.style.cssText="color: red;"
zhts.innerText="请您输入账号号码";
return false
zh.focus()
}
zhts.innerHTML='<i class="icon-ok" style="color:green;font-size: 16px;"></i>';
if(yhm.value==""){
yhts.style.cssText="color: red;"
yhts.innerHTML='<i class="icon-remove" style="color:red;font-size: 16px;margin-right: 10px;"></i>请您输入用户名';
return false
yhm.value.focus()
}
yhts.innerHTML='<i class="icon-ok" style="color:green;font-size: 16px;"></i>';
if(mm.value==""||mm.value.length<"6"){
mmts.style.cssText="color: red;"
mmts.innerHTML='<i class="icon-remove" style="color:red;font-size: 16px;margin-right: 10px;"></i>请您输入密码';
return false
}
mmts.innerHTML='<i class="icon-ok" style="color:green;font-size: 16px;"></i>';
if(yzm.value==""){
yzts.style.cssText="color: red;"
yzts.innerHTML='<i class="icon-remove" style="color:red;font-size: 16px;margin-right: 10px;"></i>请您输入验证码';
return false
}
if(yzm.value!="5739"){
yzts.style.cssText="color:red"
yzts.innerText=innerHTML='验证码错误';
return false
}
if(yzm.value=="5739"){
yzts.style.cssText="color:green"
yzts.innerHTML='<i class="icon-ok" style="color:green;font-size: 16px;"></i>';
return true
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
</head>
<body>
<h1>注册-注册账号（以前写的 本地拿的源码图标用的Iconfont可能不显示）</h1>
<div id="box">
<h3><i class="icon-edit"></i>普通注册<span>|</span><a href="http://sandbox.runjs.cn/show/egtatzza"><i class="icon-envelope"></i>邮箱注册</a></h3>
<form action="http://sandbox.runjs.cn/show/eza8lzna" method="post" onsubmit="return fun()">
<dl>
<dt><span class="span_01"><b>*</b> 账号:</span><input type="text" name="" id="zh" value="" /><small id="zhts">注册成功后即可使用账号号码登录</small></dt>
<dt><span class="span_01">用户名:</span><input type="text" name="" id="yhm" value="" /><small id="yhts">注册成功后即可使用用户名登录</small></dt>
<dt><span class="span_01"><b>*</b> 密码:</span><input type="password" name="" id="mm" value="" /><small id="mmts">6-16位，英文（区分大小写）、数字或常用符号</small></dt>
<dd><span class="span_01">验证码:</span><input type="text" name="" id="yzm" value="" /><img src="http://sandbox.runjs.cn/uploads/rs/370/vgh3leiu/timg.jpg" alt="" /><small id="yzts">输入验证码</small></dd>
<input type="submit" name="" id="" value="提交注册" id="tijiao" class="tj"/>
</dl>
</form>
</div>
</body>
</html>
*{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
button,input{border: none;}
button{cursor: pointer;}
img{vertical-align:middle;border:none;}
body{background-color:#F2F1EF;overflow: hidden;}
h1{margin: 0;text-align: center;margin-top: 80px;}
#box{width: 700px;height: 450px;border-radius:10px;background: white;margin: 20px auto;padding-left:20px;padding-top: 50px;box-shadow:1px 1px 120px rgba(250, 191, 13, 0.13);position:relative}
#box>h3{font-size: 21px;height:30px;line-height:30px;color: #f8b002;}
#box>h3>i{margin-right: 20px;}
#box>h3>a>i{margin-right: 20px;}
#box>h3>a{color:#8f8f8f;}
#box>h3>span{color: #8f8f8f;margin: 0 35px 0 30px;;;}
#box>form>dl>dt{margin: 32px 0;}
#box>form>dl>dt>.span_01{margin-right:50px;}
#box>form>dl>dd>.span_01{margin-right:50px;}
#box>form>dl>dt>.span_01>b{color: red;}
#box>form>dl>dt>input{width: 240px;height:34px;border: 1px solid #C8C8C8;border-radius:2px;}
#box>form>dl>dt>small{color: #C8C8C8;margin-left: 8px;}
#box>form>dl>dd>small{color: #C8C8C8;margin-left: 8px;}
#box>form>dl>dd>input{width: 125px;height:34px;border: 1px solid #C8C8C8;border-radius:2px;}
#box>form>dl>dd>img{width:115px;height: 34px;}
#box>form>dl>.tj{width: 240px;height:50px;border-radius:4px;background-color:#FAB40D;color: white;margin-top: 70px;margin-left:108px;cursor: pointer;}
#box>.xdw{position: absolute;top: 4px;right:-132px}
/*经过效果*/
#box>h3>a:hover{color:#f8b002;}
#box>form>dl>dt>input:active{box-shadow:0 0 5px #f8b002;}