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

最新推荐文章于 2023-03-28 18:58:14 发布

weixin_33753003

最新推荐文章于 2023-03-28 18:58:14 发布

阅读量170

点赞数 1

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/chenhuafei/p/7761178.html

版权

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="../static/css/1031.css"rel="stylesheet"type="text/css">
    <script src="../static/js/js.js"></script>
</head>
<body>
<div class="box" >
    <h2>登录</h2>
    <div class="input_box">
        <input id="uname" type="text" placeholder="请输入用户名">
    </div>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码">
    </div>
    <div id="error_box"><br></div>
    <div class="input_box">
        <button onclick="fnLogin()">登录</button>
        <button type="button" onclick=window.alert("账号密码为空，请输入！")>未输入账号密码</button>
    </div>
</div>
</body>

css

*{
    margin: 0;
    padding: 0;
    font-family:"微软雅黑";
    font-size: 12px;
}
.box{
    width: 390px;
    height: 320px;
    border: solid 1px #ddd;
    background:#FFF;
    position: absolute;
    left: 50%;
    top:42%;
    margin-left:-195px;
    margin-top: -160px;
}
.box h2{
    font-weight: normal;
    color:#666;
    font-size: 16px;
    line-height: 46px;
    height: 46px;
    overflow: hidden;
    text-align:center;
    border-bottom: solid 1px #ddd;
    background: blueviolet;
}
.input_box{
    width: 350px;
    padding-bottom: 15px;
    margin:0 auto;
    overflow: hidden;
}
.input_box input{
    width: 278px;
    height: 18px;
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color:blue;
    text-shadow: 1px 1px 1px;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-radius: 1px;
    background: #dddddd;
}
.botton{
    width: 300px;
    min-height: 20px;
    display: block;
    background-color: #dddddd;
    border: 1px solid blueviolet;
    color:blue;
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    border-radius: 5px;
    margin: 0;
}

function fnLogin() {
    var oUname=document.getElementById("uname");
    var oUpass=document.getElementById("upass");
    var oError=document.getElementById("error_box");

    oError.innerHTML="<br>"
    // uname
    if (oUname.value.length>20 ||oUname.value.length<6){
        oError.innerHTML="用户名6—20位";
        return;
    }else if (oUname.value.charCodeAt((0)>=48)&&(oUname.value.charCodeAt(0)<=57)){
        oError.innerHTML="首字母不能是数字";
        return
    }else for (var i=0; i<oUname.value.length;i++){
        if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(0)>57)&&(oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(0)>122)){
            oError.innerHTML="只能是字母或数字";
            return;
        }
    }
    // upass
    if (oUpass.value.length>20 ||oUpass.value.length<6){
         oError.innerHTML="密码6—20位";
         return;
    }
    window.alert("登陆成功！")
}

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

function fnLogin() {
    var oUname=document.getElementById("uname");
    var oUpass=document.getElementById("upass");
    var oUpass1=document.getElementById("upass1");
    var oError=document.getElementById("error_box");


    oError.innerHTML="<br>"
    // uname
    if (oUname.value.length>20 ||oUname.value.length<6){
        oError.innerHTML="用户名6—20位";
        return;
    }else if (oUname.value.charCodeAt((0)>=48)&&(oUname.value.charCodeAt(0)<=57)){
        oError.innerHTML="首字母不能是数字";
        return
    }else for (var i=0; i<oUname.value.length;i++){
        if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(0)>57)&&(oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(0)>122)){
            oError.innerHTML="只能是字母或数字";
            return;
        }
    }
    // upass
    if (oUpass.value.length>20 ||oUpass.value.length<6){
         oError.innerHTML="密码6—20位";
         return;
    }else if (oUpass.value!=oUpass1.value){
        oError.innerHTML="两次密码不一致";
        return;
    }
   window(alert("注册成功！"))
}