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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="../static/css/cc.css">
    <script src="../static/js/cc.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>
    </div>
</div>
html{
     100%;
    height: 100%;
    overflow: hidden;
}
body{
     100%;
    height: 100%;
    font-family: "Open Sans",sans-serif;
    margin: 0;
    background-color: white;
}
h2{
    background-color: #4a77d4;
    margin:30px 0 20px;
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
}
div.box{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -180px 0 0 -200px;
     300px;
    height: 300px;
    padding: 50px 50px 30px;
    background-color: #ccc;
}
div.box h2{
    color: black;
    text-shadow: 0 0 10px;
    letter-spacing: 1px;
    text-align: center;
}
div.input_box{
     278px;
    height: 18px;
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow: 1px 1px 1px;
    border-top: 1px solid #4a77d4;
    border-left: 1px solid #4a77d4;
    border-right: 1px solid #4a77d4;
    border-bottom: 1px solid #4a77d4;
    border-radius: 4px;
    background-color: #4a77d4;
}
.button{
     300px;
    min-height: 20px;
    display: block;
    background-color: #4a77d4;
    border: 1px solid #3762bc;
    color: #fff;
    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>";
    if (oUname.value.length < 6 || oUname.value.length > 20) {
        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(i) > 57) && ((oUname.value.charCodeAt(i) < 97)) || oUname.value.charCodeAt(i) > 122) {
            oError.innerHTML = "只能填写数字或字母";
            return;
        }
    }
// oUpass
    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 rel="stylesheet" href="../static/css/dd.css">
    <script src="../static/js/dd.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>
html{
     100%;
    height: 100%;
    overflow: hidden;
}
body{
     100%;
    height: 100%;
    font-family: "Open Sans",sans-serif;
    margin: 0;
    background-color: white;
}
h2{
    background-color: #4a77d4;
    margin:30px 0 20px;
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
}
div.box{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -180px 0 0 -200px;
     300px;
    height: 300px;
    padding: 50px 50px 30px;
    background-color: #ccc;
}
div.box h2{
    color: black;
    text-shadow: 0 0 10px;
    letter-spacing: 1px;
    text-align: center;
}
div.input_box{
     278px;
    height: 18px;
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow: 1px 1px 1px;
    border-top: 1px solid #4a77d4;
    border-left: 1px solid #4a77d4;
    border-right: 1px solid #4a77d4;
    border-bottom: 1px solid #4a77d4;
    border-radius: 4px;
    background-color: #4a77d4;
}
.button{
     300px;
    min-height: 20px;
    display: block;
    background-color: #4a77d4;
    border: 1px solid #3762bc;
    color: #fff;
    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 oUpass1 = document.getElementById("upass1");
    var oError = document.getElementById("error_box");
    oError.innerHTML = "<br>";
    if (oUname.value.length < 6 || oUname.value.length > 20) {
        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(i) > 57) && ((oUname.value.charCodeAt(i) < 97)) || oUname.value.charCodeAt(i) > 122) {
            oError.innerHTML = "只能填写数字或字母";
            return;
        }
    }
// oUpass
    if (oUpass.value.length < 6 || oUpass.value.length > 20) {
        oError.innerHTML = "密码要6-20位";
        return;
    }
     else if (oUpass.value!==oUpass1.value){
        oError.innerHTML="两次密码不一致";
        return;
    }
        window.alert("注册成功")

}

结果：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiaojiaqi/p/7764177.html