猪精雅0

导航

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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

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

</head>
<body bgcolor="#696969">

    <div class="box">
        <h2 class="title">
            <div class="normal-title">
                <a class="color" href="denglu.html">登录</a>
                <b>|</b>
                <a  class="color" href="zhuce.html">注册</a>
            </div>
        </h2>

        <div class="input-box" >
            <p></p>
            <p></p>
                <input id="name" type="text" placeholder="Name">
            <p></p>
        </div>
        <div class="input_box">
                <input id="pass" type="password" placeholder="Password">
            <p></p>
            <a href="a">forget password -0-</a>
            <br>
        </div>
        <div id="error_box"><br></div>
         <div class="input_box">
            <button onclick="myLogin()">Login</button>
        </div>
    </div>

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

</head>
<body bgcolor="#696969">

    <div class="box">
        <h2 class="title">
            <div class="normal-title">
                <a class="color" href="denglu.html">登录</a>
                <b>|</b>
                <a  class="color" href="zhuce.html">注册</a>
            </div>
        </h2>

        <div class="input-box" >
            <p></p>
            <p></p>
                <input id="newname" type="text" placeholder="please enter user name">
            <p></p>
        </div>
        <div class="input_box">
                <input id="newpass" type="password" placeholder="Please enter your password">
            <p></p>
        </div>
        <div class="input_box">
                <input id="againpass" type="password" placeholder="Please enter your password again">
            <p></p>
        </div>
        <div id="error_box"><br></div>
         <div class="input_box">
            <button onclick="mySubmit()">Submit</button>
        </div>
    </div>

</body>
</html>
    .box{
        margin:0 auto;
        text-align:center;
        width:500px;height:300px;
        border:2px solid #D87093;
        background:#FFC0CB;
    }
    .color{
        color:#000000;
        text-decoration:none;
        font-weight:bold;

    }
function myLogin(){
            var uName = document.getElementById("name");
            var uPass = document.getElementById("pass");
            var uError = document.getElementById("error_box");


            uError.innerHTML="<br>"
            //用户名
            if(uName.value.length<6 && uName.value.length>12) {
                uError.innerHTML = "User name must be between 6 and 12 digits！";
                return;
            }
           else if ((uName.value.charCodeAt(0)>=48)&&(uName.value.charCodeAt(0)<=57)){
                uError.innerHTML = "The first letter can not be a number!";
                return;
            }
            else for(var i=0;i<uName.value.length;i++){
                if((uName.value.charCodeAt(i)<48 || uName.value.charCodeAt(i)>57)&&(uName.value.charCodeAt(i)<97 ||uName.value.charCodeAt(i)>122)){
                    uError.innerHTML = "Only number and letter! ";
                    return;
                }
                }
            //密码
            if(uPass.value.length>12||uPass.value.length<6){
                uError.innerHTML="The password must be between 6 and 12 digits!";
                return;
            }
            window.alert("Successful login！")
        }
function mySubmit(){
            var oNewname = document.getElementById("newname");
            var oNewpass = document.getElementById("newpass");
            var oAgainname = document.getElementById("againpass");
            var oError = document.getElementById("error_box");

            oError.innerHTML="<br>"
            //用户名
            if(oNewname.value.length<6 && oNewname.value.length>12) {
                oError.innerHTML = "User name must be between 6 and 12 digits!!!";
                return;
            }
           else if ((oNewname.value.charCodeAt(0)>=48)&&(oNewname.value.charCodeAt(0)<=57)){
                oError.innerHTML = "The first letter can not be a number!!!";
                return;
            }
            else for(var i=0;i<oNewname.value.length;i++){
                if((oNewname.value.charCodeAt(i)<48 || oNewname.value.charCodeAt(i)>57)&&(oNewname.value.charCodeAt(i)<97 || oNewname.value.charCodeAt(i)>122)){
                    oError.innerHTML = "Only number and letter!!! ";
                    return;
                }
                }
            //密码
            if(oNewpass.value.length>12|| oNewpass.value.length<6){
                oError.innerHTML="The password must be between 6 and 12 digits!";
                return;
            }
            else if(oNewpass.value != oAgainname.value) {
                oError.innerHTML="The password entered twice is not the same!!!";
                return;
            }
            window.alert("Successful registration！")
        }

 

posted on 2017-10-31 17:56  102林晓霞  阅读(216)  评论(0)    收藏  举报