• 完成登录与注册


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

    用户名6-12位

    首字母不能是数字

    只能包含字母和数字

    密码6-12位

    注册页两次密码是否一致

    登录HTML

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <link rel="stylesheet" href="../static/css/denglu1.1.css" type="text/css">
        <script src="../static/JS/denglu1.1.js"></script>
    
    </head>
    <body style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
        <div class="box" >
            <h2 class="denglu">登录</h2>
            <div class="input_box">
                <input id="uname" type="text" placeholder="请输入用户名">
            </div>
            <div class="input_box">
                <input id="uword" type="password" placeholder="请输入密码">
            </div>
            <div id="error_box"><br></div>
            <div class="input_box">
                <button onclick="fnLogin()">登录</button>
            </div>
        </div>
    
    
    </body>
    </html>
    复制代码

    登录.CSS

    复制代码
     .box{
            border: 1px solid #cccccc;
             334px;
            margin: 5px;
            text-align: center;
        }
        .denglu{
            background-color: cornflowerblue;
            font-family: 华文楷体;
            font-size: 35px;
        }
        .input_box{
           height: 40px;
        }
    复制代码

    登录JS

    复制代码
    function fnLogin() {
        var oUname = document.getElementById("uname")
        var oError = document.getElementById("error_box")
        var oUword = document.getElementById("uword")
    
        oError.innerHTML = "<br>"
        if (oUname.value.length < 6 || oUname.value.length > 12) {
            oError.innerHTML = "用户名为6到12位";
            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(i) > 57) && (oUname.value.charCodeAt(i) < 97) || (oUname.value.charCodeAt(i) > 122)) {
                oError.innerHTML = "用户名只能是字母与数字";
                return
            }
        }
    
        if ((oUword.value.length < 6) || (oUword.value.length > 20)) {
            oError.innerHTML = "密码为6到20位";
            return
        }
        window.alert("登录成功!!")
    }
    复制代码

    注册。HTML

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <link rel="stylesheet" href="/static/css/zhuece.css" type="text/css">
        <script src="/static/JS/zhuce.js"></script>
    
    </head>
    
    <body style="text-align: center">
    <div class="box">
        <h2 class="zhuce">注册</h2>
        <div class="input_box">
            <input id="zcuname" type="text" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            <input id="zcuword1" type="password" placeholder="请输入密码">
        </div>
        <div class="input_box">
            <input id="zcuword2" type="password" placeholder="请再次输入密码">
        </div>
        <div id="zcerror_box"><br></div>
        <div class="input_box">
            <button onclick="fnEnroll()">立即注册</button>
        </div>
    </div>
    
    </body>
    </html>
    复制代码

    注册。CSS

    复制代码
     .box{
            border: 1px solid #cccccc;
             334px;
            margin: 5px;
            text-align: center;
        }
      .zhuce{
          font-family: "Bodoni MT Poster Compressed";
      }
        .input_box{
           height: 40px;
        }
    复制代码

    注册。JS

    复制代码
    function fnEnroll() {
        var zcoUname = document.getElementById("zcuname")
        var zcoError = document.getElementById("zcerror_box")
        var zcoUword1 = document.getElementById("zcuword1")
        var zcoUword2 = document.getElementById("zcuword2")
    
        zcoError.innerHTML = "<br>"
        if (zcoUname.value.length < 6 || zcoUname.value.length > 12) {
            zcoError.innerHTML = "用户名为6到12位";
            return
        } else if( (zcoUname.value.charCodeAt(0) >= 48) && (zcoUname.value.charCodeAt(0) <= 57)){
            zcoError.innerHTML = "用户名首位不能是数字";
            return
        } else for (var i = 0; i < zcoUname.value.length; i++) {
            if ((zcoUname.value.charCodeAt(i) < 48) || (zcoUname.value.charCodeAt(i) > 57) && (zcoUname.value.charCodeAt(i) < 97) || (zcoUname.value.charCodeAt(i) > 122)) {
                zcoError.innerHTML = "用户名只能是字母与数字";
                return
            }
        }
    
        if ((zcoUword1.value.length < 6) || (zcoUword1.value.length > 20)) {
            zcoError.innerHTML = "密码为6到20位";
            return
        }
        if (zcoUword1.value()!=zcoUword2.value()){
            zcoError.innerHTML="两次密码不一致"
        }
        window.alert("注册成功!!")
    }
    复制代码
  • 相关阅读:
    20191010-2 每周例行报告
    2018092609-2 选题 Scrum立会报告+燃尽图 01
    20190919-1 每周例行报告
    20190919-4 单元测试,结对
    20190919-6 四则运算试题生成,结对
    20190919-5 代码规范,结对
    PSP总结报告
    20181204-1 每周例行报告
    每个成员明确公开地表示对成员帮助的感谢 (并且写在各自的博客里)
    作业要求 20181127-2 每周例行报告
  • 原文地址:https://www.cnblogs.com/lianghaohui123/p/7763490.html
Copyright © 2020-2023  润新知