<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-image: url(./img/pic7.jpg);
background-size: 100%;
}
#outter{
width: 50%;
}
#inner{
width: 550px;
height: 650px;
position: absolute;
right: 130px;
top: 60px;
background-color: rgba(255,255,255,0.8);
border-radius: 15px;
}
h1{
position: relative;
top: 30px;
left: 30px;
}
form{
display: block;
position: relative;
width: 90%;
left: 30px;
top: 60px;
}
.normalInput{
width: 75%;
position: relative;
height: 38px;
margin-right: -100px;
border-radius: 3px;
outline: none;
border: none;
}
.normalTxt{
display: inline-block;
width: 20%;
margin-right: 5px;
}
.item{
font-size: 20px;
margin-top: 20px;
}
#age{
width: 143px;
height: 30px;
}
select{
width: 411px;
height: 30px;
font-size: 18px;
}
#submitBtn{
color: #fff;
width: 80%;
margin: auto;
height: 39px;
background-color: #3580eb;
font-size: 25px;
border: none;
margin-top: 20px;
margin-left: 65px;
border-radius: 10px;
}
.msg{
font-size: 10px;
color: red;
margin-left: 110px;
position: absolute;
}
#fasong{
width: 150px; height: 40px; margin-left: 110px;
border-radius:20px;
border-color: #3580eb ;
background-color: #3580eb;
font-size: 18px;
color: #fff;
font-family:YouYuan;
font-weight: 5px;
line-height: 30px;
margin-left: 300px;
}
#fasong:hover{
background-color: royalblue;
}
.yanzheng{
width: 35%;
position: relative;
height: 38px;
margin-left: 110px;
border-radius: 3px;
outline: none;
border: none;
position: absolute;
}
</style>
</head>
<body>
<div id="outter">
<div id="inner">
<h1>欢迎注册</h1>
<form action="" method="post">
<div class="item" >
<div class="normalTxt"><label>账 号</label></div>
<input class="normalInput" type="text" name="account" id="account" placeholder="请设置用户名" onblur="check(this);"/>
<div id="msgAccount" class="msg"></div>
</div>
<div class="item">
<div class="normalTxt"><label>密 码</label></div>
<input class="normalInput" type="text" name="account" id="pwd" placeholder="请设置密码" onblur="checkPass(this);" />
<div id="msgPwd" class="msg"></div>
</div>
<div class="item">
<div class="normalTxt"><label>确认密码</label></div>
<input class="normalInput" type="text" name="account" id="" placeholder="确认密码" onblur="confirmPassword(this);"/>
<div id="msgPwdAgain" class="msg"></div>
</div>
<div class="item">
<div class="normalTxt"><label>年 龄</label></div>
<input class="normalInput" type="text" name="age" id="age" placeholder="请输入合法年龄" onblur="ageC(this);" />
<div id="ages" class="msg"></div>
</div>
<div class="item">
<div class="normalTxt"><label>邮箱</label></div>
<input class="normalInput" type="text" name="account" id="" placeholder="请设置用户名" onblur="email1(this);" />
<div id="msgEmail" class="msg"></div>
</div>
<div class="item">
<div class="normalTxt"><label>手机号</label></div>
<input class="normalInput" type="text" name="account" id="" placeholder="请设置用户名" onblur="phoneNumber(this);"/>
<div id="msgPhone" class="msg"></div>
</div>
<div class="item"><!--
<a id="fasong" href="#" οnclick="settime(this);" >发送验证</a> -->
<input class="yanzheng" type="text" name="account" id="tt" placeholder="请输入验证码" />
<input type="button" id="fasong" value="免费获取验证码" onclick="settime(this)" />
<div id="tishi" class="msg"></div>
</div>
<div class="item">
来自: <select style="margin-left: 48px;width: 365px;">
<option value ="" >上海</option>
<option value ="">北京</option>
<option value ="">广州</option>
<option value ="">深圳</option>
</select>
</div>
<input type="submit" value="注册" id="submitBtn" disabled="disabled" />
</form>
</div>
</div>
<script type="text/javascript">
// 为每一项定义一个标识 是否合法 , 默认不合法
var accountFlag = false;
var pwdFlag = false;
var pwdAgain = false;
var emailZ =false;
var numberP=false;
var ageCheng=false;
var yanZheng=false;
/*发送验证*/
/*
1.拿到手机号的11位数,开始倒计时,改变发送验证的状态,获取60秒倒计时函数方法,
2.到零的时候改变为重新验证,
*/
function a(){
var vertify = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
//0-vertify.length-1 suiji abcdefghijklmnopqrstuvwxyz
var sd = '';
for (var i = 0; i < 6; i++) {
//向下取整
var random = Math.floor( Math.random() * (vertify.length));
//1:初始化验证码 空字符 res长度为6
sd += vertify[random];
var msgList = document.getElementById("tishi");
/* 将内容用p标签包裹 */
}
var vstr = "<p>" + sd + "</p>";
msgList.innerHTML = vstr + msgList.innerHTML;
console.log(sd);
//2:获取vertify中每一个字符
}
//倒计时
var countdown = 60;
function settime(obj) {
if (countdown == 0) {
obj.removeAttribute("disabled");
obj.value="免费获取验证码";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.value="重新发送(" + countdown + ")";
countdown--;
if(countdown==59){
a();
}
yanZheng=true;
}
setTimeout(function() {settime(obj) },1000)
submitFunc();
}
/* 账号验证 */
// 长度在[6,18]之间
function check(t){
var v = t.value;
var msg = document.getElementById("msgAccount");
if(!(v.length>=6 && v.length<=18)){
// 给出提示
msg.innerText = "账号长度在 6~18 个字符之间";
accountFlag=false;
}else{
//抹掉提示
msg.innerText = "";
accountFlag=true;
}
submitFunc();
}
/*密码验证*/
//密码:密码的长度在[6,30],不能包含账号
function checkPass(t){
var account = document.getElementById("account").value;
var msgPassword = document.getElementById("msgPwd");
var pass=t.value;
if((pass.length>=6 && pass.length<=30) && pass.indexOf(account)==-1){
//合法年龄 抹掉提示
msgPassword.innerText = "";
pwdFlag=true;
}else{
//抹掉提示
msgPassword.innerText = "密码长度在 [6,30] 个字符之间,不能包含账号";
pwdFlag=false;
}
submitFunc();
}
/* 确认密码 */
function confirmPassword(t){
// 和上一次密码相同即可
var pwdv = document.getElementById("pwd").value;
var msg = document.getElementById("msgPwdAgain");
var v = t.value;
if(pwdv==v){
msg.innerText = "";
pwdAgain = true;
}else{
// 不合法
msg.innerText = "两次密码不一致";
pwdAgain = false;
}
submitFunc();
}
/*邮箱:必须出现@*/
function email1(t){
var emails = document.getElementById("msgEmail");
var e=t.value;
if(e.indexOf("@")==-1){
emails.innerText="不合法邮箱!";
emailZ=false;
}else{
emails.innerText=" ";
emailZ=true;
}
submitFunc();
}
/*手机号:必须要11位数字*/
function phoneNumber(t){
var msgPhone1 = document.getElementById("msgPhone");
var p=t.value;
if(p.length==11){
msgPhone1.innerText=" ";
numberP=true;
}else{
msgPhone1.innerText="手机号,必须要11位数字";
numberP=false;
}
submitFunc();
}
/*必须是成年人,才能注册*/
function ageC(t){
var ages1 = document.getElementById("ages");
var a=t.value;
if(a>=18){
ages1.innerText=" ";
ageCheng=true;
}else{
ages1.innerText="必须满18周岁注册";
ageCheng=false;
}
submitFunc();
}
/*注册*/
function submitFunc(){
if(accountFlag && pwdFlag && pwdAgain && emailZ && numberP && ageCheng && yanZheng){
document.getElementById("submitBtn").disabled = false;
}else{
document.getElementById("submitBtn").disabled = true;
}
}
</script>
</body>
</html>
发送验证码60秒倒计时
最新推荐文章于 2022-06-23 17:19:59 发布