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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登陆

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Welcome 0</title>
    <link rel="stylesheet"type="text/css"href="../static/css/dl.css">
    <script src="../static/js/dl.js"></script>
</head>
<body class="bg">

<div class="box" >
    <div class="lg1" ><h2>欢迎登陆</h2></div>
    <div class="box2" >
        户名：<input id="name" type="text"placeholder="请输入用户名"><br>
        密码：<input id="password" type="password"placeholder="请输入密码"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="lg2" >
         <button type="submit" onclick="myLogin()">注册</button>
         <button type="submit" onclick=window.alert("是否取消登陆！")>取消</button>
          <br>
          <div class="design">
          <div class="lg3" ><h4></h4></div>
                <p>Design by yy</p>
         </div>

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

        function myLogin() {
        var oUname = document.getElementById("name")
        var oError = document.getElementById("error_box")
        var opassword = document.getElementById("password")
        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;
               }
            }

            if(opassword.value.length<6||opassword.value.length>20){
                oError.innerHTML="密码需在6-20个字符内";
                return;
            }


            window.alert("登陆成功！")

             }

.body
  {
  background-color:palevioletred;
  }

div{
    margin:0 auto;
    text-align:center;
}
.box{
    width:500px;
    height:250px;
    border-color:#8B4513;
    border-width:1px;
    margin-top:100px;
}
.lg1{
    font-size: 20px;
    color: pink;
}

.box2{
    font-size:18px;
    font-weight:bold;
    color: #8B4513;
 }

.lg2{
    width:100px;
    height:30px;
    boder-style:hidden;
}

.design{
    font-size:8px;
    color:#D2691E;
}

.lg3{
    font-size:8px;
    color:#FF4500;
}

#login{
    width: 18%;
    padding: 5px 10px;
    font-size: 15px;
    border: none;
    font-family: 'Yu Mincho Demibold';
    border-radius: 25px;
    background:cornflowerblue;
    cursor: pointer;
    color: white;
}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Welcome 0</title>
    <link rel="stylesheet"type="text/css"href="../static/css/dl.css">
    <script src="../static/js/dl.js"></script>
</head>
<body class="bg">

<div class="box" >
    <div class="lg1" ><h2>欢迎注册</h2></div>
    <div class="box2" >
            请输入账号:　<input id="name" type="text" placeholder="name"><br>
            请输入密码:　<input id="password" type="password" placeholder="PIN"><br>
            再输入密码:　<input id="password1" type="password1" placeholder="PIN"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="lg2" >
         <button type="submit" onclick="myLogin()">注册</button>
         <button type="submit" onclick=window.alert("是否取消注册！")>取消</button>
          <br>
          <div class="design">
          <div class="lg3" ><h4></h4></div>
                <p>Design by yy</p>
         </div>

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

        function myLogin() {
        var oUname = document.getElementById("name")
        var oError = document.getElementById("error_box")
        var opassword = document.getElementById("password")
            var opassword1 = document.getElementById("password1")
        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;
               }
            }

            if(opassword.value.length<6||opassword.value.length>20){
                oError.innerHTML="密码需在6-20个字符内";
                return;
            }
            if (opassword1.value != opassword.value) {
               oError.innerHTML = "登陆请重新输入你的密码";
               return;
            }

.body
  {
  background-color:palevioletred;
  }

div{
    margin:0 auto;
    text-align:center;
}
.box{
    width:500px;
    height:250px;
    border-color:#8B4513;
    border-width:1px;
    margin-top:100px;
}
.lg1{
    font-size: 20px;
    color: pink;
}

.box2{
    font-size:18px;
    font-weight:bold;
    color: #8B4513;
 }

.lg2{
    width:100px;
    height:30px;
    boder-style:hidden;
}

.design{
    font-size:8px;
    color:#D2691E;
}

.lg3{
    font-size:8px;
    color:#FF4500;
}

#login{
    width: 18%;
    padding: 5px 10px;
    font-size: 15px;
    border: none;
    font-family: 'Yu Mincho Demibold';
    border-radius: 25px;
    background:cornflowerblue;
    cursor: pointer;
    color: white;
}

posted @ 2017-11-01 20:59 103许雅婷阅读(160) 评论(0) 收藏举报

103许雅婷

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

公告