完成登录与注册页面的前端

最新推荐文章于 2023-03-16 21:40:39 发布

awsau6326

最新推荐文章于 2023-03-16 21:40:39 发布

阅读量118

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/Qzlhxxx/p/7766939.html

版权

完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1031h-登录</title>
    <link rel="stylesheet" type="text/css" href="../static/css/1031c.css">
    <script src="../static/js/1031j1.js"></script>
</head>
<body>
<div class="pen-title">
  <h1>登 录</h1>
</div>
<div class="from">
    <h2>请登录您的账号</h2>
    <div class="input_box">
       <input id="uname" type="text" placeholder="请输入用户名">
    </div>
    <br>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码">
    </div>
    <div id="error_box"><br></div>
    <div class="login_box">
        <button onclick="fnLogin()">登录</button>
    </div>
</div>

</body>
</html>

css

body {
    background: rgba(70, 233, 133, 0.08);
}
.pen-title {
    padding: 50px 0;
    text-align: center;
    letter-spacing: 2px;
}
.pen-title h1 {
  margin: 0 0 20px;
  font-size: 48px;
  font-weight: 300;
    color: rgba(0, 0, 0, 0.66);
}
.from{
    width:280px;
    border: 1px solid #d9d9d9;
    border-top: 5px solid #33b5e5;
    margin: auto;
    background-color:#ffffff;
    padding: 40px;
}
h2 {
  margin: 0 0 20px;
  color: #33b5e5;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;

}
.input_box{
    height:35px;
    padding: 5px;
    margin: 0 auto;
}
.input_box input{
  outline: none;
  display: block;
  width: 100%;
  border: 1px solid #d9d9d9;
  margin: 0 0 20px;
  padding: 10px 15px;
  box-sizing: border-box;
  font-wieght: 400;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.input_box input:focus {
  border: 1px solid #33b5e5;
  color: #333333;
}
.login_box button {
  cursor: pointer;
  background: #33b5e5;
  width: 100%;
  border: 0;
  padding: 10px 15px;
  color: #ffffff;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.login_box button:hover{
  background: #5153ff;
}
#error_box{
    color: #666666;
    padding:10px;
}

function fnLogin(){
            var uName = document.getElementById("uname");
            var uPass = document.getElementById("upass");
            var uError = document.getElementById("error_box");


            uError.innerHTML="<br>"
            //用户名
            if(uName.value.length<6|| uName.value.length>12) {
                uError.innerHTML = "用户名需在6-12位中间";
                return;
            }
           else if ((uName.value.charCodeAt(0)>=48)&&(uName.value.charCodeAt(0)<=57)){
                uError.innerHTML = "用户名开头不能为数字";
                return;
            }
            else for(var i=0;i<uName.value.length;i++){
                if((uName.value.charCodeAt(i)<48 || uName.value.charCodeAt(i)>57)&&(uName.value.charCodeAt(i)<97 ||uName.value.charCodeAt(i)>122)){
                    uError.innerHTML = "用户名只能为数字或字母";
                    return;
                }
                }
            //密码
            if(uPass.value.length>12||uPass.value.length<6){
                uError.innerHTML="密码需在6-12位中间";
                return;
            }
            window.alert("登录成功！")
        }

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1031h-注册</title>
    <link rel="stylesheet" type="text/css" href="../static/css/1031c.css">
    <script src="../static/js/1031j2.js"></script>
</head>
<body>
<div class="pen-title">
  <h1>注 册</h1>
</div>
<div class="from">
    <h2>请进行注册</h2>
    <div class="input_box">
       <input id="uname" type="text" placeholder="请设置您的用户名">
    </div>
    <br>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码">
    </div>
    <div class="input_box">
        <input id="aupass" type="password" placeholder="请再次输入密码">
    </div>
    <div id="error_box"><br></div>
    <div class="login_box">
        <button onclick="fnLogin()">注册</button>
    </div>
</div>

</body>
</html>

css同上

function fnLogin(){
            var oNewname = document.getElementById("uname");
            var oNewpass = document.getElementById("upass");
            var oAgainname = document.getElementById("aupass");
            var oError = document.getElementById("error_box");
            oError.innerHTML="<br>"
            if(oNewname.value.length<6 && oNewname.value.length>12) {
                oError.innerHTML = "用户名需在6-12位中间";
                return;
            }
           else if ((oNewname.value.charCodeAt(0)>=48)&&(oNewname.value.charCodeAt(0)<=57)){
                oError.innerHTML ="用户名开头不能为数字";
                return;
            }
            else for(var i=0;i<oNewname.value.length;i++){
                if((oNewname.value.charCodeAt(i)<48 || oNewname.value.charCodeAt(i)>57)&&(oNewname.value.charCodeAt(i)<97 || oNewname.value.charCodeAt(i)>122)){
                    oError.innerHTML = "用户名只能为数字或字母";
                    return;
                }
                }
            //密码
            if(oNewpass.value.length>12|| oNewpass.value.length<6){
                oError.innerHTML="密码需在6-12位中间";
                return;
            }
            else if(oNewpass.value != oAgainname.value) {
                oError.innerHTML="两次密码输入不一致";
                return;
            }
            window.alert("注册成功！")
        }