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

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

1.用户名6-12位

2.首字母不能是数字

3.只能包含字母和数字

4.密码6-12位

5.注册页两次密码是否一致

 

登录页

 html代码：

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

<div class="box" >
    <h2 >LOGIN</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;
        width: 334px;
        margin: 5px;
        text-align: center;
        color:#A00000;
        background: #B0B0B0 ;
        left: 50%;
        top: 42%;
        margin-left:200px;
        margin-top:200px;
    }

    .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" type="text/css" href="../static/css/31.css">
    <script src="../static/js/31.js"></script>

</head>
<body>

    <div class="box">
    <h2>register</h2>
        <div class="input_box">
            　<input id="uname" type="text" placeholder="请输入账号">   </div><br>
        <div class="input_box">
            　<input id="upass" type="password" placeholder="请输入密码（区分大小写）"></div><br>
         <div class="input_box">
            　<input id="upass1" type="password" placeholder="再输入密码（区分大小写）"></div><br>
        <div id="error_box"><br></div>
         <div class="input_box">
            <button onclick="fnLogin()" >register</button></div>
    </div>
</div>
</body>
</html>

 

css代码：

 .box{
        border: 1px solid #cccccc;
        width: 334px;
        margin: 5px;
        text-align: center;
        color:#A00000;
        background: #B0B0B0 ;
        left: 50%;
        top: 42%;
        margin-left:200px;
        margin-top:200px;
    }
    .input_box{
       height: 40px;
    }

 

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 = "重新输入密码";
        return;
    }

    window.alert("注册成功")
}

 

 

posted @ 2017-10-31 23:07  袁颖琳  阅读(223)  评论(0)    收藏  举报