一款简单的注册页面源码

2021-04-01 建站知识 浏览 手机预览
文章来源: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
  • 如果你的问题还没有解决,可以点击页面右侧的“ ”,站长收到问题后会尽快回复解决方案到你的邮箱。
  • 创造始于问题,有了问题才会思考,有了思考,才有解决问题的方法,才有找到独立思路的可能。 —— 陶行知