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

最新推荐文章于 2024-05-14 21:45:28 发布

weixin_30597269

最新推荐文章于 2024-05-14 21:45:28 发布

阅读量303

点赞数 1

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/095lqt/p/7760738.html

版权

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

<!DOCTYPE html>

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

</head>
<body>
<div class="box">
<h2>欢迎进入</h2>
<h3>登录界面</h3>

<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="myLogin()">登陆</button>
</div>
</div>
</body>
</html>

function myLogin() {
             var oUname = document.getElementById("uname");
             var oError = document.getElementById("error_box");
             var oUpass=document.getElementById("upass");
             oError.innerHTML="<br>";
             //uname
             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 = "first number";
                      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 = "only letter or number";
                      return;
                  }
             }
             //upass
             if(oUpass.value.length<6||oUpass.value.length>12){
                  oError.innerHTML="密码6-12位"
                  return;
             }
             if((oUname.value.length<6||oUname.value.length>12)&&(oUpass.value.length<6||oUpass.value.length>12)){
                 oError.innerHTML="用户名密码要求6-12位"
                 return;
             }
                window.alert("登陆成功！")
             }

body{
    background: greenyellow;
    padding-right:500px;
    padding-left:500px;
    color: deeppink;
    padding-top:50px;
    font-size: 16px;
    background: black;
    font-family:verdana,Arial,Helvetica,sans-serif;
}
#input_box{
    align:center;
    margin:650px;
    padding-left:650px;
    }
{
    padding-left: 80px;
}

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

</head>
<body>
<div class="box">
<h2>欢迎进入</h2>
<h3>注册界面</h3>

<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()" >注册</button></div>
</div>
</body>
</html>

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="first number";
        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="only letter or number";
            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("注册成功")
}

body{
    background: greenyellow;
    padding-right:500px;
    padding-left:500px;
    color: deeppink;
    padding-top:50px;
    font-size: 16px;
    background: black;
    font-family:verdana,Arial,Helvetica,sans-serif;
}
#input_box{
    align:center;
    margin:650px;
    padding-left:650px;
    }
{
    padding-left: 80px;
}