zoukankan html css js c++ java

11.1

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../static/dl.css">
    <script src="../static/js/denlu.js"></script>

</head>
<body>

<div class="box">
    <div id="tittle"><h2 align="center">登录</h2></div>
    <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="foLogin()">登录</button>
    </div>

    <button type="button" onclick="foLogin()"><a href="zhuce.html">注册</a></button>

</div>

</body>
</html>

登录js代码：

function foLogin() {
            var oUname = document.getElementById("uname");
            var oError = document.getElementById("error_box");
            var oUpass = document.getElementById("upass");
            var isoError = true;
            oError.innerHTML = "<br>";

            if (oUname.value.length < 6|| oUname.value.length > 20) {
                oError.innerHTML = "用户名要6-20位";
                isoError = false;
                return;
            }else if((oUname.value.charCodeAt(0)<=48)&&(oUname.value.charCodeAt(0)>=57)){
                oError.innerHTML="首字母不能为数字";
                isoError = false;
                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="只能包含字母和数字";
                    isoError = false;
                    return;
                }
            }


            if (oUpass.value.length < 6|| oUpass.value.length > 20) {
                oError.innerHTML = "密码要6-20位";
                isoError = false;
                return;
            }

            window.alert("登录成功！！")
        }

注册HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../static/dl.css">
    <script src="../static/js/yx.js"></script>

</head>
<body>

<div class="box">
    <div id="tittle"><h2 align="center">新用户注册</h2></div>
    <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="foLogin()">注册</button>
    </div>


</div>

</body>
</html>

注册js代码：
function foLogin() {
            var oUname = document.getElementById("uname");
            var oError = document.getElementById("error_box");
            var oUpass = document.getElementById("upass");
            var oUpass1=document.getElementById("upass1");
            var isoError = true;
            oError.innerHTML = "<br>";

            if (oUname.value.length < 6 || oUname.value.length > 20) {
                oError.innerHTML = "用户名要6-20位";
                isoError = false;
                return;
            }else if((oUname.value.charCodeAt(0)<=48)&&(oUname.value.charCodeAt(0)>=57)){
                oError.innerHTML="首字母不能为数字";
                isoError = false;
                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="只能包含字母和数字";
                    isoError = false;
                    return;
                }
            }

            if (oUpass.value.length < 6 || oUpass.value.length > 20){
                oError.innerHTML = "密码要6-20位";
                isoError = false;
                return;
            }
            if(oUpass.value()!=oUpass1.value()){
                oError.innerHTML="两次密码不一致";
                isoError = false;
                return;
            }
            window.alert("注册成功！！")

        }

css代码：
box{
      300px;
}

div.box {
    border: 1px solid #000000;
    height: 290px;
     300px;
    float: left;
    margin: 50px;
    background: antiquewhite;
}

div.input_box{
    text-align: center;
    height: 50px;
     auto;
    padding: 5px
}

div.input_box button{
    border: aqua;
    font-size: 20px;
     100px;
    height: 30px;
    background: coral;
}

查看全文

相关阅读:
Sum Root to Leaf Numbers [LeetCode]
Symmetric Tree [LeetCode]
Combination Sum II [LeetCode]
Maximal Rectangle [LeetCode]
Trapping Rain Water [LeetCode]
Combination Sum [LeetCode]
05 如何“响铃”
04 八进制
 03 关键字？保留字？预留字？
020 函数之变量的作用域

原文地址：https://www.cnblogs.com/chenyanxi123/p/7766061.html