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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登陆html

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

</head>

<body>
  <div><h1>打开代码的世界</h1></div>
  <div class="aa"><script>document.write("loading....")</script>
    </div>

<div class="flex-container">

    <div class="box">
        <p id="we">aaa</p>
        <script>
  document.getElementById("we").innerHTML=Date();
  <!--代替id=we的内容-->

        </script>

        <div class="input_box">
            登录　<input id="uname" type="text" placeholder="write down your name">
        </div>
        <br>
        <div class="input_box">
            密码　<input id="upass" type="password" placeholder="write down your PIN">
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">load</button>

        </div>
        <br>
    </div>

</div>
</body>
</html>
<style>

</style>

登录css

h1{
    align:center;
    padding-right: 0;
    padding-left: 0;
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 15px;
    margin: 0;
    color: #904;
    padding-top: 0;}
    body{
    padding-right:500px;
    margin-top:100px;
    padding-left:500px;
    font-size:16px;
    background:#000;
    padding-bottom:40px;
    color:black;
    padding-top:40px;
    font-family:verdana,Arial,Helvetica,sans-serif;
    }
form {
    display: block;
    margin-top: 0em;}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    padding-left: 100px;
    padding-top: 40px;
    background-color: pink;}

aa {
    color: pink
}


input_box{
    align:center;
    margin:550px;
    padding-left:550px;
    color:red;
    }

    body{
    padding-right:500px;
    margin-top:100px;
    padding-left:500px;
    font-size:16px;
    background:#000;
    padding-bottom:40px;
    color:red;
    padding-top:40px;
    font-family:verdana,Arial,Helvetica,sans-serif;
    }

登录js

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

    oError.innerHTML = "<br>";
    // oUname

 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(opassward.value.length<6 || opassward.value.length>12){
        oError.innerHTML="密码6-12位";
        return;
    }

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

注册html

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

</head>

<body>
<div><h1>打开代码的世界</h1></div>
  <div class="aa"><script>document.write("loading....")</script>
    </div>
<div class="flex-container">

    <div class="box">
<h2>welcome to register</h2>
        <div class="input_box">
            请输入账号　<input id="uname" type="text" placeholder="write down your name">   </div><br>
        <div class="input_box">
            请输入密码　<input id="upass" type="password" placeholder="write down your PIN"></div><br>
         <div class="input_box">
            再输入密码　<input id="upass1" type="password" placeholder="write down your PIN"></div><br>
        <div id="error_box"><br></div>
         <div class="input_box">
            <button onclick="fnLogin()" >register</button></div>
    </div>
</div>
</body>
</html>

注册css

h1{
    align:center;
    padding-right: 0;
    padding-left: 0;
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 15px;
    margin: 0;
    color: #904;
    padding-top: 0;}
    body{
    padding-right:500px;
    margin-top:100px;
    padding-left:500px;
    font-size:16px;
    background:#000;
    padding-bottom:40px;
    color:black;
    padding-top:40px;
    font-family:verdana,Arial,Helvetica,sans-serif;
    }
form {
    display: block;
    margin-top: 0em;}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 300px;
    padding-left: 100px;
    padding-top: 40px;
    background-color: pink;}

input_box{
    align:center;
    margin:570px;
    padding-left:570px;
    color:red;

    }

    body{
    padding-right:500px;
    margin-top:100px;
    padding-left:500px;
    font-size:16px;
    background:#000;
    padding-bottom:40px;
    color:red;
    padding-top:40px;
    font-family:verdana,Arial,Helvetica,sans-serif;
    }

注册js

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

    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(oUpass.value.length<6 || oUpass.value.length>12){
        oError.innerHTML="密码6-12位";
        return;
    }
    if (oUpass1.value!=oUpass.value ) {
        oError.innerHTML = "rewrite your PIN";
        return;
    }

    window.alert("注册成功")
}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/YyYyYy11/p/7761343.html