文章来源：http://www.dedecmsok.com/html/n260.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>注册</title>
<style>
html,body {margin:0px;height:100%;}
body {background:#f1f1f1;font-family:"Microsoft YaHei","MicrosoftJhengHei",STHeiti,MingLiu;}
.div_c_l {float:left;padding:5px;font-size:15px;font-weight:500;}
.div_c_l span {line-height:38px;padding:0 5px;width:60px;}
.div_c_l img {height:30px;margin:2px;padding:0px 7px;}
.div_c_r {float:right;padding:5px;width:calc(100% - 100px);}
.div_c_r input {border:0px;margin:5px;float:left;line-height:28px;font-size:15px;text-align:right;padding-right:5px;width:100%;outline:none;text-align:left;}
.div_c_r button {width:88px;float:right;background-color:#F2F2F2;height:28px;padding:4px 8px;line-height:20px;font-size:14px;font-weight:500;margin:5px 5px 0 0;border:1px solid #DBDBDB;border-radius:6px;outline:none;}
.div_f {border-bottom:1px solid #E8E8E8;background-color:#fff;}
.btn_1 {border:none;margin:40px 6% 16px 6%;width:88%;height:1.8em;background-color:#05a0e0;border-radius:4px;font-size:20px;color:#FFFFFF;outline:none;-webkit-tap-highlight-color:transparent;}
.div_b_l {float:left;margin-left:6%;padding:5px;width:calc(44% - 10px);}
.div_b_r {float:right;margin-right:6%;padding:5px;width:calc(44% - 10px);text-align:right;}
.span_b {font-size:16px;font-weight:500;color:#000;padding:0 2px;float:left;}
.span_br {font-size:16px;font-weight:500;color:#05a0e0;float:left;}
input[type=checkbox] {visibility:hidden;}
.checkboxforget {top:0px;float:left;width:20px;height:20px;background:#05a0e0;margin:0 5px 0 0;border-radius:100%;position:relative;}
.checkboxforget label {display:block;width:18px;height:18px;border-radius:100px;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;cursor:pointer;position:absolute;top:1px;left:1px;z-index:1;background:#fff;}
.checkboxforget input[type=checkbox]:checked+label {background:#05a0e0;width:20px;height:20px;top:0px;left:0px;}
.inp_radio {float:left;line-height:48px;}
input[type=radio] {visibility:hidden;}
.checkboxforget1 {top:13px;float:left;width:20px;height:20px;background:#AFAFAF;margin:0 5px 0 0;border-radius:100%;position:relative;}
.checkboxforget1 label {display:block;width:18px;height:18px;border-radius:100px;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;cursor:pointer;position:absolute;top:1px;left:1px;z-index:1;background:#fff;}
.checkboxforget1 input[type=radio]:checked+label {background:#05a0e0;width:20px;height:20px;top:0px;left:0px;}
.red {color:#ff6600;display:inline-block;}
</style>
</head>
<body sroll="no" onclick="onload">
<form name="form1" onSubmit="return checkreg()" action="#" method="post">
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span> 姓名</span>
</div>
<div class="div_c_r"><input type="text" name="name" id="name" placeholder="请填写真实姓名">
<span style="float: right;margin-top: -30px;background:#fff" id="tish"></span></input>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span>密码</span>
</div>
<div class="div_c_r"><input type="password" name="password" id="password" onKeyDown="" value="" placeholder="6~20位数字、字符任意组合">
<span style="float: right;margin-top: -30px;background:#fff" id="ts"></span></input>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span style="width:70px;">确认密码</span>
</div>
<div class="div_c_r"><input type="password" name="passagain" id="Pwdagain" onKeyDown="" value="" placeholder="请再次输入密码">
<span style="float: right;margin-top: -30px;background:#fff" id="tishi"></span></input>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span style="width:70px;">手机号码</span>
</div>
<div class="div_c_r"><input type="tel" id="phone" name="phone" onkeydown="" id="phone" value="" placeholder="请输入手机号码">
<span style="float: right;margin-top: -30px;background:#fff" id="tss"></span>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span style="width:70px;">验证码</span>
</div>
<div class="div_c_r">
<input type="tel" name="code" onBlur="sub();" onKeyDown="" id="code" placeholder="请输入验证码">
<input style="float:right;text-align:center;font-size:12px;padding:4px 9px;background:#05a0e0;color:#fff;border:0;height:28px;" id="dynamic" value="发送验证码" type="button" onClick="sendMessage(60)">
<span style="margin-top: -30px;background:#fff" id="tsi"></span>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="div_f">
<div class="div_col" id="me">
<div class="div_c_l"><span>性别</span>
</div>
<div class="div_c_r" style="padding: 0;">
<div style="margin-left: 28px;" class="inp_radio">
<div class="checkboxforget1">
<input type="radio" id="Remember1" name="sex" id="sex" value="0" checked />
<label for="Remember1"></label>
</div>
男
</div>
<div style="margin-left: 8px;" class="inp_radio">
<div class="checkboxforget1">
<input type="radio" id="Remember2" name="sex" id="sex" value="1" />
<label for="Remember2"></label>
</div>
女
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<button id="submit" class="btn_1">提交</button>
</form>
<script type="text/javascript">
function checkreg() {
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
if(document.form1.name.value == "") {
//alert("请输入您的用户名!");
document.getElementById("tish").innerHTML = "<font color='red'>请输入您的用户名!</font>";
form1.name.focus();
return false;
}
document.getElementById("tish").innerHTML = "<font color='green'>正确</font>";
// if (document.form1.User.value.length<4 || document.form1.User.value.length>15)
// {
// alert("用户名长度限制在4-15位!");
// form1.User.focus();
// return false;
// }
if(document.form1.password.value == "") {
//alert("请输入密码!");
document.getElementById("ts").innerHTML = "<font color='red'>请输入密码</font>";
form1.password.focus();
return false;
}
if(document.form1.password.value.length < 6 || document.form1.password.value.length > 20) {
//alert("密码长度限制在6-20位!");
document.getElementById("ts").innerHTML = "<font color='red'>密码长度限制在6-20位!</font>";
form1.password.focus();
return false;
}
document.getElementById("ts").innerHTML = "<font color='green'>正确</font>";
if(document.form1.password.value != document.form1.Pwdagain.value) {
document.getElementById("tishi").innerHTML = "<font color='red'>两次密码不相同</font>";
form1.password.focus();
return false;
}
document.getElementById("tishi").innerHTML = "<font color='green'>正确</font>";
// alert("注册成功!");
// location.href="http://2016cn08.kobesoft.com.cn/index.php/weixin/page/login";
if(!myreg.test(document.form1.phone.value)) {
document.getElementById("tss").innerHTML = "<font color='red'>手机号码错误</font>";
form1.password.focus();
return false;
}
document.getElementById("tss").innerHTML = "<font color='green'>正确</font>";
if(document.form1.code.value == "") {
document.getElementById("tsi").innerHTML = "<font color='red'>验证码不能为空</font>";
form1.code.focus();
return false;
}
document.getElementById("tsi").innerHTML = "<font color='green'>正确</font>";
location.href="homepage.html";
}
function sendMessage(t) {
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
if(!myreg.test(document.form1.phone.value))
{
alert('请输入有效的手机号码！');
return false;
} //
document.form1.dynamic.disabled = true;
for(i = 1; i <= t; i++) {
window.setTimeout("update_p(" + i + "," + t + ")", i * 1000);
}
}
function update_p(num, t) {
if(num == t) {
document.form1.dynamic.value = " 重新发送 ";
document.form1.dynamic.disabled = false;
}
else {
printnr = t - num;
document.form1.dynamic.value = " (" + printnr + ")秒后重发";
}
}
</script>
</body>
</html>原文地址：http://www.dedecmsok.com/html/n260.html