利用web前端綜合製作一個註冊功能
阿新 • • 發佈：2020-08-16
廢話不多說 直接上程式碼
<!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;
width: 600px;
height: 800px;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -400px;
/*background: #333333;*/
}
#header {
position: relative;width: 100%;
height: 90px;
border-bottom: 1px solid gray;
}
#rglod {
position: relative;
height: 100%;
width: 50%;
/*background: white;*/
}
.rgl {
float: left;
text-align: center;
color: gray;font-size: 1.5em;
height: 100%;
width: 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;
width: 100%;
height: 650px;
/*background: red;*/
}
.totalmenu {
position: relative;
border-radius: 10px;
width: 65%;
height: 90px;
margin-top: 22px;
/*background: blue;*/
border: 1px solid black;
}
.option {
border-radius: 10px;
height: 100%;
width: 30%;
background: #FBFBFB;
font-size: 1.4em;
color: gray;
text-align: center;
line-height: 90px;
}
.input {
display: block;
height: 100%;
border: 2px;
width: 70%;
font-size: 1.5em;
}
.totalmenu div {
float: left;
}
#section > div {
float: left;
}
.desc {
margin-top: 20px;
width: 35%;
/*background: orange;*/
height: 90px;
font-size: 1em;
color: gray;
text-align: center;
line-height: 90px;
}
#getcode {
height: 70%;
width: 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;
width: 100%;
height: 150px;
}
.foot {
position: relative;
width: 100%;
height: 70px;
/*background: gray;*/
margin-top: 5px;
/*margin-left: 50px;*/
line-height: 70px;
}
#reg {
height: 70%;
width: 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>