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

查看全文

相关阅读:
6-Python爬虫-分布式爬虫/Redis
ES 查询时排序报错(fielddata is disabled on text fileds by default ... )解决方法
 Intellij Idea webstorm 激活
 Intellij Idea 配置jdk
java 获取(格式化)日期格式
 js 跳转 XSS漏洞预防
 CSS去掉背景颜色
 js对象无法当成参数传递解决方法
 Elasticsearch java api
java多条件查询SQL语句拼接的小技巧

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