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

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

lzsan_

11932人浏览 · 2022-04-01 19:33:01

lzsan_ · 2022-04-01 19:33:01 发布

登录界面

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

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;
    }
}