完成登录与注册页面的前端 - 077吴文欣

公告

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pagesix</title>
    <link href="../CSS/style6.css" rel="stylesheet" type="text/css">
    <script src="../JScript/js6.js"></script>
</head>
<body>
<div class="login">
    <div class="login-top">
        <h1>LOGIN FORM</h1>
        <form>
            <input id="uname" type="text" value="Username" onfocus="this.value = '';" onblur="if (this.value==''){ this.value = 'Username';}">
            <input id="upass" type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value==''){ this.value = 'Password';}">
        </form>
        <div class="forgot">
            <input type="checkbox"><p>Keep me logged in</p>
            <a href="#">forgot Password</a>
        </div>
    </div>
    <div class="login-bottom">
        <div id="errorbox"></div><button type="submit" onclick="MyLogin()">Login</button>
    </div>
</div>
<div class="copyright">
    <p>Copyright ♡ 无文</p>
</div>
</body>
</html>

html,body,div,h2,h3,p,a,nav {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
a{
    text-decoration:none;
}
.txt-rt{
    text-align:right;
}
.txt-lt{
    text-align:left;
}
.txt-center{
    text-align:center;
}
.pos-relative{
    position:relative;
}
.pos-absolute{
    position:absolute;
}
.vertical-base{
    vertical-align:baseline;
}
.vertical-top{
    vertical-align:top;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: 100%;
    background-color: wheat;
}
.meue{
    background-color: white;
    height:40px;
}
.meue div{
    float:left;
    line-height:250%;
}
.meue div a{
    font-family: 幼圆;
    margin-right:18px;
}
.login {
    padding: 120px 0px 30px 0px;
    width: 35%;
    margin: 0 auto;
}
.login-top {
    background: #E1E1E1;
    border-radius: 25px 25px 0px 0px;
    -webkit-border-radius: 25px 25px 0px 0px;
    -moz-border-radius: 25px 25px 0px 0px;
    -o-border-radius: 25px 25px 0px 0px;
    padding: 30px 60px;
}
.login-top h1 {
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    color:cadetblue;
    margin: 0px 0px 20px 0px;
    font-family: "Harrington";
}
.login-top input[type="text"] {
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: #818181;
    padding: 15px 20px;
    background: #CACACA;
    border: 1px solid #ccc;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    margin: 0px 0px 12px 0px;
    width: 88%;
    -webkit-appearance: none;
}
.login-top input[type="password"] {
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: #818181;
    padding: 15px 20px;
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    margin: 0px 0px 12px 0px;
    width: 88%;
    -webkit-appearance: none;
}
.forgot br {
    font-size: 13px;
    font-weight: 500;
    color: cadetblue;
    display: inline-block;
    padding: 0px 7px 0px 0px;
}
.login-bottom button {
    background: coral;
    color: #FFF;
    font-size: 17px;
    font-weight: 400;
    padding: 8px 7px;
    width: 20%;
    display: inline-block;
    cursor: pointer;
    border-radius: 6px;
    -webkit-border-radius: 19px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    margin: 0px 20px 0px 10px;
    outline: none;
    border: none;
}
.login-bottom button:hover {
    background: #818181;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}
.login-bottom div{
    color:#FFF;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    float:left;
    width:auto;
    padding:8px 8px;
}
.forgot {
    text-align: right;
}
.forgot input{
    float: left;
}
.forgot p{
    float: left;
    font-size: 13px;
    font-weight: 500;
    color: cadetblue;
}
.forgot a {
    font-size: 13px;
    font-weight: 500;
    color: cadetblue;
    display: inline-block;
    padding: 0px 15px 0px 0px;
}
.forgot a:hover {
    color: #818181;
}
.login-bottom {
    background: cadetblue;
    padding: 20px 65px;
    border-radius: 0px 0px 25px 25px;
    -webkit-border-radius: 0px 0px 25px 25px;
    -moz-border-radius: 0px 0px 25px 25px;
    -o-border-radius: 0px 0px 25px 25px;
    text-align: right;
    border-top: 2px solid coral;
}
.copyright {
    padding: 100px 0px 0px 0px;
    text-align: center;
}
.copyright p {
    font-size: 15px;
    font-weight: 400;
    color:coral;
}

function MyLogin() {
    var oUname=document.getElementById("uname");
    var oUpass=document.getElementById("upass");
    var oError=document.getElementById("errorbox");

    //uname
     if(oUname.value=="Username"&&oUpass.value=="Password"){
        oError.innerHTML="Please input username";
        return;
    }else if(oUname.value.length<6||oUname.value.length>20){
        oError.innerHTML="Username must be 6 to 20";
        return;
    }else if(oUname.value.charCodeAt(0)>=48 && oUname.value.charCodeAt(0)<=57){
        oError.innerHTML="Frist 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>20) {
        oError.innerHTML = "Password must be 6 to 20";
        return;
    }
    window.alert("Login Successful")
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pageseven</title>
    <link href="../CSS/style7.css" rel="stylesheet" type="text/css">
    <script src="../JScript/js7.js"></script>
</head>
<body>
<div class="login">
    <div class="login-top">
        <h1>Register FORM</h1>
        <form>
            <input id="uname" type="text" value="Username" onfocus="this.value = '';" onblur="if (this.value==''){ this.value = 'Username';}">
            <input id="fupass" type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value==''){ this.value = 'Password';}">
            <input id="supass" type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value==''){ this.value = 'Password';}">
        </form>
    </div>
    <div class="login-bottom">
        <div id="errorbox"></div><button type="submit" onclick="MyRegister()">Register</button>
    </div>
</div>
<div class="copyright">
    <p>Copyright ♡ 无文</p>
</div>
</body>
</html>

html,body,div,h2,h3,p,a,nav {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
a{
    text-decoration:none;
}
.txt-rt{
    text-align:right;
}
.txt-lt{
    text-align:left;
}
.txt-center{
    text-align:center;
}
.pos-relative{
    position:relative;
}
.pos-absolute{
    position:absolute;
}
.vertical-base{
    vertical-align:baseline;
}
.vertical-top{
    vertical-align:top;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: 100%;
    background-color: wheat;
}
.meue{
    background-color: white;
    height:40px;
}
.meue div{
    float:left;
    line-height:250%;
}
.meue div a{
    font-family: 幼圆;
    margin-right:18px;
}
.login {
    padding: 120px 0px 30px 0px;
    width: 35%;
    margin: 0 auto;
}
.login-top {
    background: #E1E1E1;
    border-radius: 25px 25px 0px 0px;
    -webkit-border-radius: 25px 25px 0px 0px;
    -moz-border-radius: 25px 25px 0px 0px;
    -o-border-radius: 25px 25px 0px 0px;
    padding: 30px 60px;
}
.login-top h1 {
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    color:cadetblue;
    margin: 0px 0px 20px 0px;
    font-family: "Harrington";
}
.login-top input[type="text"] {
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: #818181;
    padding: 15px 20px;
    background: #CACACA;
    border: 1px solid #ccc;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    margin: 0px 0px 12px 0px;
    width: 88%;
    -webkit-appearance: none;
}
.login-top input[type="password"] {
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: #818181;
    padding: 15px 20px;
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    margin: 0px 0px 12px 0px;
    width: 88%;
    -webkit-appearance: none;
}
.login-bottom button {
    background: coral;
    color: #FFF;
    font-size: 17px;
    font-weight: 400;
    padding: 8px 7px;
    width: 25%;
    display: inline-block;
    cursor: pointer;
    border-radius: 6px;
    -webkit-border-radius: 19px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    margin: 0px 20px 0px 10px;
    outline: none;
    border: none;
}
.login-bottom button:hover {
    background: #818181;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}
.login-bottom div{
    color:#FFF;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    float:left;
    width:auto;
    padding:8px 8px;
}
.login-bottom {
    background: cadetblue;
    padding: 20px 65px;
    border-radius: 0px 0px 25px 25px;
    -webkit-border-radius: 0px 0px 25px 25px;
    -moz-border-radius: 0px 0px 25px 25px;
    -o-border-radius: 0px 0px 25px 25px;
    text-align: right;
    border-top: 2px solid coral;
}
.copyright {
    padding: 100px 0px 0px 0px;
    text-align: center;
}
.copyright p {
    font-size: 15px;
    font-weight: 400;
    color:coral;
}

function MyRegister() {
    var oUname=document.getElementById("uname");
    var oFUpass=document.getElementById("fupass");
    var oSUpass=document.getElementById("supass");
    var oError=document.getElementById("errorbox");
    //uname
    if(oUname.value=="Username"&&oFUpass.value=="Password"&&oSUpass.value=="Password"){
        oError.innerHTML="Please input username";
        return;
    }else if(oUname.value.length<6||oUname.value.length>12){
        oError.innerHTML="Username must be 6 to 12";
        return;
    }else if(oUname.value.charCodeAt(0)>=48 && oUname.value.charCodeAt(0)<=57){
        oError.innerHTML="Frist 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(document.getElementById("fupass").value!=document.getElementById("supass").value){
        oError.innerHTML="The password must be the same";
        return;
    }else if(oFUpass.value.length<6||oFUpass.value.length>12) {
        oError.innerHTML = "Password must be 6 to 12";
        return;
    }
    window.alert("Register Successful")
}

posted on 2017-11-01 21:06 077吴文欣阅读(234) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部