废话不多说 直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作页面</title>
<style>
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
/*ctrl+alt+L格式化代码*/
body {
height: 1000px;
}
#app {
position: relative;
600px;
height: 800px;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -400px;
/*background: #333333;*/
}
#header {
position: relative;
100%;
height: 90px;
border-bottom: 1px solid gray;
}
#rglod {
position: relative;
height: 100%;
50%;
/*background: white;*/
}
.rgl {
float: left;
text-align: center;
color: gray;
font-size: 1.5em;
height: 100%;
50%;
/*background: blue;*/
line-height: 90px;
}
.rgl:hover {
color: rgba(30, 159, 255, .5);
border-bottom: 3px solid rgba(30, 159, 255, .5);
}
#section {
position: relative;
top: 50px;
100%;
height: 650px;
/*background: red;*/
}
.totalmenu {
position: relative;
border-radius: 10px;
65%;
height: 90px;
margin-top: 22px;
/*background: blue;*/
border: 1px solid black;
}
.option {
border-radius: 10px;
height: 100%;
30%;
background: #FBFBFB;
font-size: 1.4em;
color: gray;
text-align: center;
line-height: 90px;
}
.input {
display: block;
height: 100%;
border: 2px;
70%;
font-size: 1.5em;
}
.totalmenu div {
float: left;
}
#section > div {
float: left;
}
.desc {
margin-top: 20px;
35%;
/*background: orange;*/
height: 90px;
font-size: 1em;
color: gray;
text-align: center;
line-height: 90px;
}
#getcode {
height: 70%;
60%;
margin-left: 15px;
margin-top: 15px;
color: white;
font-size: 1em;
background: #1E9FFF;
}
#getcode:hover {
background: rgba(30, 159, 255, .5);
}
#footer {
position: relative;
margin-top: 70px;
100%;
height: 150px;
}
.foot {
position: relative;
100%;
height: 70px;
/*background: gray;*/
margin-top: 5px;
/*margin-left: 50px;*/
line-height: 70px;
}
#reg {
height: 70%;
120px;
background: #1E9FFF;
color: white;
}
#reg:hover {
background: rgba(30, 159, 255, .5);
}
#forms{
}
</style>
</head>
<body>
<div id="app">
<form action="" id="handout">
<div id="header">
<div id="rglod">
<div class="rgl">登入</div>
<div class="rgl">注册</div>
</div>
</div>
<div id="section">
<!--<form action="" id="forms">-->
<div class="totalmenu">
<div class="option">手机</div>
<input class="input" type="number" name="tel" id="tels">
</div>
<div class="totalmenu">
<div class="option">图形码</div>
<input class="input" type="text" name="pcode" id="vercode">
</div>
<div class="totalmenu">
<div class="option">验证码</div>
<input class="input" type="number" name="ycode" placeholder="请输入手机短信验证码">
</div>
<div class="desc">
<button id="getcode">获取验证码</button>
</div>
<div class="totalmenu">
<div class="option">昵称</div>
<input class="input" type="text" name="nickname">
</div>
<div class="desc">
您在社区的名字
</div>
<div class="totalmenu">
<div class="option">密码</div>
<input class="input" type="password" name="pwd" id="password">
</div>
<div class="desc">
6到16个字符
</div>
<div class="totalmenu">
<div class="option">确认密码</div>
<input class="input" type="password" name="yespwd" id="agpwd">
</div>
<!--</form>-->
</div>
<div id="footer">
<div class="foot">
<input type="radio" name="gou" id="agree"> 同意用户服务条款
</div>
<div class="foot">
<button id="reg">立即注册</button>
</div>
<!--js代码区-->
<script>
//获得验证码
var arr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'
, 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q',
'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C',
'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
var getcode = document.getElementById('getcode');
getcode.addEventListener('click', code);
realcode = "";
function code() {
cod = "";
for (var i = 0; i < 6; i++) {
//随机索引
var a = Math.floor(Math.random() * 62);
cod = cod + arr[a];
}
alert('您的验证码为:' + cod);
realcode = cod;
}
var vercode = document.getElementById('vercode');
vercode.addEventListener("blur", yzcode);
function yzcode() {
//验证验证码
var writecode = document.getElementById('vercode').value;
if (writecode !== realcode) {
console.log(writecode);
console.log(realcode);
alert('验证码错误');
} else {
alert('验证码正确')
}
}
//验证手机号是否符合规则
var tels = document.getElementById('tels');
tels.addEventListener("blur", yztel);
function yztel() {
var writetel = document.getElementById('tels').value;
// console.log(writetel);
if(!/^1[3456789]d{9}$/.test(writetel)||writetel.length>11){
alert('手机号输出错误,请重新输入');
return false;
}else{
return true;
}
}
//判断密码是否符合规定
var password = document.getElementById('password');
password.addEventListener("blur", yzpwd);
function yzpwd() {
writepwd = document.getElementById('password').value;
if(writepwd.length<6||writepwd.length>16){
alert('输入密码格式有误,请重新输入');
return false;
}else{
return true;
}
}
//确认密码是否与输入的密码一致
var agpwd = document.getElementById('agpwd');
agpwd.addEventListener("blur", agthepwd);
function agthepwd() {
var writeagpwd = document.getElementById('agpwd').value;
if(writeagpwd !== writepwd){
alert('输入密码有误,请重新输入');
return false;
}else{
return true;
}
}
isagree = false;
//判定是否同意了协议
var agree = document.getElementById('agree');
agree.addEventListener("click", toagree);
function toagree() {
alert('您已同意该协议')
isagree = true;
}
//注册前提是同意了服务协议
var reg = document.getElementById('reg');
reg.addEventListener("click", issucceed);
function issucceed() {
if(isagree){
alert('注册成功')
isagree = false;
return;
}else{
alert('您还得同意协议,才能完成注册')
return;
}
}
</script>
</div>
</form>
</div>
<!--</form>-->
</body>
</html>