前端登录和注册页面的实现及验证

登录界面

文本框中在输入前要显示相应的背景图片和悬浮字，鼠标移上去之后就消失。在输入框内会进行检查，利用正则化方程判断输入是否符合要求，其中验证码区分大小写。点击验证码可以实现换一张验证码。点击免费注册按钮跳转到注册页面。点击登录按钮，如果上面的内容都输入的符合要求，则弹出当前的时间和“登录成功”的小窗并转入到主页面；如果不符合要求则弹出“登录失败”的小窗。

login.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录界面</title><link rel="stylesheet" href="css/login.css"/> <script src="jquery-3.6.0.min.js"></script><script src="js/login.js"></script>
</head>
<body onload="change();realClock();"><div id="zg"> <div id="logindiv"><h3 id="title">账号登录</h3> <div><input type="text" id="username" placeholder="用户名" onblur="checkname();"/><div id="cw"></div>  </div>           <div><input type="password" id="password" placeholder="密码" onblur="checkpass();"/><div id="cw1"></div></div><div><input type="text" id="vcode" placeholder="验证码" onblur="check();"/><span id="code" onclick="change()"></span><div id="cw2"></div></div><div id="pro"><span id="lo"><input type="checkbox"/>一周内免登录</span><a href="../注册界面/index.html" id="zc">免费注册</a></div><div id="btlogin"><input type="button" value="登录" onclick="checkall();"/></div></div></div></div> </body>
</html>

login.css:

#zg{                position:relative;             width:550px;       border-radius:10px;      height:350px;  margin-left: 25%;background-color: rgb(148, 203, 224);
}
#logindiv{                position:absolute;             width:350px;            height:300px;             left:50%;             top:50%;   border-radius:10px;          margin-left:-175px;               margin-top:-150px;       background:white;       text-align: center;
}
#title{color: darkcyan;}
#title,
#username,
#password,
#vcode,
#autologin,
#btlogin
{margin:10px 0;
}
#autologin{font-size: 10px;
}
.wrong{text-indent:-150px;font-size: 10px;color: red;
}
#cw,#cw1{height: 5px;
}
#username {background-image:url(../image/用户.png);background-repeat: no-repeat;background-position-y: center;text-indent: 16px;height:30px;width:250px;border:1px soild rgba(212, 212, 211, 0.986);
}
#password{background-image:url(../image/密码.png);background-repeat: no-repeat;background-position-y: center;text-indent: 16px;height:30px;border:1px soild rgba(212, 212, 211, 0.986);width:250px;
}
#vcode{background-image:url(../image/验证码.png);background-repeat: no-repeat;background-position-y: center;text-indent: 16px;height:30px;width:200px;border:1px soild rgba(212, 212, 211, 0.986);}
#code{background-image: url(../image/yzm.jpg);width: 100px;height:30px;
}
#btlogin input{width:250px;background-color: blue;color:white;letter-spacing:2px;font-weight: bold;height: 30px;border-radius:10px;
}
#pro{margin: auto;width: 250px;
}
#lo{float: left;font-size: 15px;color:cornflowerblue;
}
#zc{float: right;color: darkviolet;font-size: 15px;
}
a{text-decoration: none;
}

var code;
function change(){var arrays=new Array('1','2','3','4','5','6','7','8','9','0','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');code='';for(var i=0;i<4;i++){var r=parseInt(Math.random()*arrays.length);code+=arrays[r];}document.getElementById("code").innerHTML=code;}
function check(){var icode=document.getElementById("vcode").value;if(icode==''){document.getElementById("cw2").className="wrong";document.getElementById("cw2").innerText="验证码不能为空!";return false;}else{if(icode!=code){document.getElementById("cw2").className="wrong";document.getElementById("cw2").innerText="请输入正确的验证码";return false;}else{document.getElementById("cw2").innerText=" ";return true;}}
}  function checkname() {var name = document.getElementById("username").value;var reg = /^[\u4e00-\u9fa5a-zA-Z]{2,4}$/;if(name==''){ document.getElementById("cw").className="wrong";document.getElementById("cw").innerText="用户名不能为空!";return false;} else{if (reg.test(name)) {document.getElementById("cw").innerText=" ";return true;} else {document.getElementById("cw").className="wrong";document.getElementById("cw").innerText="请输入有效的用户名";return false;}}
}
function checkpass() {var pass = document.getElementById("password").value;var reg = /^[0-9a-zA-Z]{6,12}$/;if(pass==''){ document.getElementById("cw1").className="wrong";document.getElementById("cw1").innerText="密码不能为空!";return false;}else{if (reg.test(pass)) {document.getElementById("cw1").innerText=" ";return true;} else {document.getElementById("cw1").className="wrong";document.getElementById("cw1").innerText="密码长度为6—12位";return false;}}
}
function checkall(){var now=new Date();var hour=now.getHours();var minute=now.getMinutes();var second=now.getSeconds();var week=now.getDay();var a=['日','一','二','三','四','五','六'];var str="现在是："+hour+":"+minute+":"+second+",星期"+a[week];if(checkname()==true&&checkpass()==true&&check()==true){alert(str+"，登录成功！");location.href="../主页面/main2.html";}else{alert("登录失败！");return false;}}

2.注册界面

在输入框会进行检查，利用正则化方程判断输入是否符合要求，如果输入不符合要求就显示错误，如果输入符合要求，就显示√，学校是需要用户进行选择的，先选择地区，再选择学校。点击注册按钮，输入错误则弹出“注册失败”的小窗，输入符合要求就弹出当前的时间和“注册成功”的小窗，并跳转到登录界面。

index.html:

<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册界面</title><link rel="stylesheet" href="css/index.css"/><script src="../jquery-3.6.0.min.js"></script><script src="js/index.js"></script>
</head>
<body><div id="all" style="background-image: url('../注册界面/image/back.jpg');"><h3>注册界面</h3><div id="you"><div>会员登录名：</div> <div>密码： </div><div>再次输入密码：</div><div>学校：</div><div>手机号码：</div><div>邮编：</div></div><div id="zuo"><div><input type="text" id="name" onblur="checkname();"/><span id="jc"></span><p id="cw"></p>  </div>                      <div><input type="password" id="pass1" onblur="checkpass();"/><span id="jc1"></span><p id="cw1"></p></div><div><input type="password" id="pass2" onblur="checkpassw();"/><span id="jc2"></span><p id="cw2"></p></div><div><select style="background-color: beige;border: 2px solid black;" id="city"><option>请选择</option></select>  <select style="background-color:beige;border: 2px solid black;" id="school"><option>======请选择======</option></select> </div>              <div><input type="text" id="phone" onblur="checkphone();"/><span id="jc4"></span><p id="cw4"></p></div><div><input type="text" id="mail" onblur="checkmail();"/><span id="jc5"></span><p id="cw5"></p></div><div id="an"><input type="button" value="同意以下服务条款并注册" onclick="check()"/></div></div></div></body>
</html>

index.css:

#all{width: 1200px;height: 700px;margin:auto;border-radius: 10px;border:2px dashed aqua;
}
h3{height: 15px;text-align: center;color: rgb(153, 10, 10);
}
#you{margin-left: 35%;text-align:right;float:left;
}
#zuo{margin-top: -50px;margin-left: 45%;text-align: left;float: left;width:500px;
}
div{height: 50px;
}
input{width:240px;background-color: rgb(247, 244, 217);
}
#an input{background-color: rgb(155, 155, 219);color: rgb(238, 232, 182);width: 170px;border-radius: 5px;
}
.ok{text-indent: 16px;font-size: 10px;color: red;background-repeat: no-repeat;
}
.wrong{text-indent: 16px;font-size: 10px;color: red;background-repeat: no-repeat;}

index.js:

function checkname() {var name = document.getElementById("name").value;var reg = /^[\u4e00-\u9fa5a-zA-Z]{2,4}$/;if(name==''){ document.getElementById("cw").style.backgroundImage=" url(image/im1.png)";document.getElementById("cw").className="wrong";document.getElementById("cw").innerText="请输入用户名";document.getElementById("jc").innerText=" ";  } else{if (reg.test(name)) {document.getElementById("jc").innerHTML="<img src='im2.png'/>";document.getElementById("cw").innerText=" ";return true;} else {document.getElementById("cw").style.backgroundImage=" url(image/im1.png)";document.getElementById("cw").className="wrong";document.getElementById("cw").innerText="请输入有效的用户名";document.getElementById("jc").innerText=" ";}}}
function checkpass() {var pass1 = document.getElementById("pass1").value;var reg = /^[0-9a-zA-Z]{6,12}$/;if (reg.test(pass1)) {document.getElementById("jc1").innerHTML="<img src='im2.png'/>";document.getElementById("cw1").innerText=" ";return true;} else {document.getElementById("cw1").style.backgroundImage=" url(image/im1.png)";document.getElementById("cw1").className="wrong";document.getElementById("cw1").innerText="密码长度为6—12位";document.getElementById("jc1").innerText=" ";}}
function checkpassw() {var pass1 = document.getElementById("pass1").value;var pass2 = document.getElementById("pass2").value;if (pass2==pass1&&pass2!='') {document.getElementById("jc2").innerHTML="<img src='im2.png'/>";document.getElementById("cw2").innerText=" ";return true;} else {document.getElementById("cw2").style.backgroundImage=" url(image/im1.png)";document.getElementById("cw2").className="wrong";document.getElementById("cw2").innerText="请再次输入密码";document.getElementById("jc2").innerText=" ";}}
var city = ['湖北','湖南','北京','上海'];
var school = [['======请选择======'],  ['=======请选择======','武汉大学','华中科技大学','中国地质大学','武汉理工大学','华中农业大学','华中师范大学','中南财经政法大学','中南民族大学','湖北大学','武汉科技大学','长江大学','武汉工程大学','武汉纺织大学','武汉轻工大学','湖北工业大学','湖北中医药大学','江汉大学','湖北师范大学','三峡大学','黄冈师范学院','湖北民族大学','汉江师范学院','湖北文理学院','武汉体育学院','湖北美术学院','湖北汽车工业学院','湖北工程学院','湖北理工学院','湖北科技学院','湖北医药学院','湖北警官学院','荆楚理工学院','武汉音乐学院','湖北经济学院','武汉商学院','湖北第二师范学院','湖北大学知行学院','武汉科技大学城市学院','三峡大学科技学院','江汉大学文理学院'],  ['=======请选择======','长沙学院','湘潭大学','吉首大学','湖南大学','中南大学','湖南科技大学','湖南农业大学','中南林业科技大学','湖南中医药大学','湖南师范大学','湖南师范大学'],  ['=======请选择======','清华大学 ','北京大学',' 中国人民大学 ','北京邮电大学',' 北京航空航天大学 ','北京科技大学 ','北京化工大学 ','首都经贸大学 ','北京理工大学',' 北京交通大学 ','北京工业大学',' 北方工业大学',' 北京师范大学 ','首都师范大学',' 北京外国语大学 ','对外经贸大学',' 北京语言大学',' 中国农业大学',' 北京电影学院',' 中国石油大学','  北京大学医学部',' 中国协和医科大学',' 首都医科大学',' 北京中医药大学',' 中国地质大学 ','外交学院 ','中国青年政治学院 ','中央财经大学','中国传媒大学 ','中央音乐学院 ','北京体育大学 ','中国矿业大学','中央美术学院',' 中国人民公安大学',' 北京印刷学院 ','中国戏曲学院','北京林业大学 ','中央民族大学',' 中国政法大学',' 华北电力大学',' 北京第二外国语学院 ','北京信息科技大学',' 北京建筑工程学院',' 北京科技职业学院','中国音乐学院 ','中央广播电视大学',' 北京联合大学',' 北京石油化工学院','北京电子科技学院 ','北京教育学院 ','北京服装学院',' 中央戏剧学院'],  ['=======请选择======','复旦大学','上海交通大学 ','同济大学',' 华东师范大学 ','华东理工大学 ','东华大学',' 华东政法大学 ','上海大学',' 上海理工大学',' 上海海事大学',' 上海电力大学 ','上海师范大学','上海外国语大学 ','上海财经大学 ','上海对外经贸大学 ','上海海洋大学',' 上海中医药大学',' 上海工程技术大学',' 上海海关学院 ','上海科技大学 ','上海第二工业大学',' 上海应用技术大学',' 上海纽约大学']];
window.onload=function(){  createCity();     document.getElementById("city").onchange= createschool;
};
function createCity(){  var ci = document.getElementById("city");  for(var i in city){  var op = new Option(city[i],city[i]);  ci.options.add(op);  }
}
function createschool(){  var index = document.getElementById("city").selectedIndex;   var sh = document.getElementById("school");  sh.options.length=0;   for(var i in school[index]){  var op = new Option(school[index][i],school[index][i]);  sh.options.add(op);  }
} function checkphone() {var phone = document.getElementById("phone").value;var reg = /^1[3578]\d{9}$/;if(phone!=''){if (reg.test(phone)) {document.getElementById("jc4").innerHTML="<img src='im2.png'/>";document.getElementById("cw4").innerText=" ";return true;} else {document.getElementById("cw4").style.backgroundImage=" url(image/im1.png)";document.getElementById("cw4").className="wrong";document.getElementById("cw4").innerText="请输入有效的手机号码";document.getElementById("jc4").innerText=" ";}}else{document.getElementById("cw4").style.backgroundImage=" url(image/im1.png)";document.getElementById("cw4").className="wrong";document.getElementById("cw4").innerText="请输入手机号码";document.getElementById("jc4").innerText=" ";}
}
function checkmail() {var mail= document.getElementById("mail").value;var reg = /^\w{1,}@\w{1,}(.\w{1,}){1,}$/;if(mail!=''){if (reg.test(mail)) {document.getElementById("jc5").innerHTML="<img src='im2.png'/>";document.getElementById("cw5").innerText=" ";return true;} else {document.getElementById("cw5").style.backgroundImage=" url(image/im1.png)";document.getElementById("cw5").className="wrong";document.getElementById("cw5").innerText="请输入有效的邮箱";document.getElementById("jc5").innerText=" ";}}else{document.getElementById("cw5").style.backgroundImage=" url(image/im1.png)";document.getElementById("cw5").className="wrong";document.getElementById("cw5").innerText="请输入邮箱";document.getElementById("jc5").innerText=" ";}
}
function check(){var now=new Date();var hour=now.getHours();var minute=now.getMinutes();var second=now.getSeconds();var week=now.getDay();var a=['日','一','二','三','四','五','六'];var str="现在是："+hour+":"+minute+":"+second+",星期"+a[week];if( checkname()==true&&checkpass()==true&&checkpassw()==true&&checkphone()==true&&checkmail()==true){alert(str+"注册成功!");location.href="../登录界面/login.html";}else{alert("注册失败！");return false;}
}

前端登录和注册页面的实现及验证相关推荐

使用flask-WTF,Flask-Login，sqlite3实现登录和注册（前端登录和注册页面）
文章目录 1.文件结构: 2.实现效果: 3.使用的可视化工具(工具DB Browser for sqlite下载): 4.参考过的文章(一部分代码来自这里): 5.主文件.main.py: 6.前端 ...
前端开发学习--登录和注册页面设计（html和css，可完成两个页面点击切换）
今天学习了登录和注册页面的设计,主要是HTML和CSS部分,注册和切换采用了Js代码进行,后面将通过js进行填写内容的验证,进而可通过JSP跳转到Servlet进行DAO数据的校验,这属于后端部分了. ...
jsp java servlet_jsp+java ，servlet如何实现用户登录和注册页面
jsp+java servlet实现简单用户登录(使用数据库,包括注册页面) 功能介绍本项目通过使用jsp和servlet实现简单的用户登录.主要逻辑为:如果用户不存在,则首先进行注册(注册信息同步 ...
Ant Design 编写登录和注册页面
Ant Design编写登录和注册页面前言一.登录 1.index.tsx页面 2.index.module.less 二,注册 1.index.tsx 2.index.module.less 总 ...
从0开始写Vue项目-Vue页面主体布局和登录、注册页面
1.从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客 2. 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客一.主体布局 ...
WordPress自定义登录和注册页面样式并且添加验证码
通过一番尝试和验证以及网络搜索,终于实现了WordPress默认的登录和注册界面的样式修改,下面把过程记录下来.笔者主要是通过在主题中添加WordPress的钩子来实现登录和注册界面的样式修改的.Wo ...
vue3 导航守卫（在没有登录时只能一直在登录和注册页面）
记录在学习vue中的一些问题导航守卫,官方文档给出的定义: 你可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ - ...
Java实现登录与注册页面
用java实现的登录与注册页面,实现了客户端(浏览器)到服务器(Tomcat)再到后端(servlet程序)数据的交互.这里在注册页面加入了验证码验证. 注册的html代码,页面非常丑!!请见谅.. ...
邮箱取消必填php,WordPress注册页面如何去掉邮箱验证，从而不再是必填选项？
现在很多网站已经不会将邮箱作为必填项,都会选择使用手机号可以注册登录,所以邮箱注册就不必设置为必填项目,那么WordPress注册页面如何去掉邮箱验证,从而不再是必填选项? 这个需求比较特殊,但是我还 ...