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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

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

</head>
<<body>
<div class="box" >
    <div class="jar" ><h2>欢迎登陆</h2></div>

        <div class="input_box">
            账号　     <input id="name" type="text" placeholder="请输入用户名"></div><br>
        <div class="input_box">
            密码　     <input id="password" type="password" placeholder="请输入密码"></div><br>

        <div id="error_box"><br></div>
         <div class="ja">
            <button onclick="myLogin()" >登陆</button></div>
    </div>
</div>
</body>
</html>

div{
    margin:0 auto;
    text-align:center;
    backgroup-color:lightblue;
}
.box{
    width:500px;
    height:220px;
    border-color:blue;
    border-style:groove;
    border-width:1px;
    margin-top:100px;
}

 .input_box{
    font-size:18px;
    font-weight:bold;
 }
.ja{
    width:100px;
    height:30px;
    boder-style:hidden;
}
function fnLogin() {
        var uname = document.getElementById("name");
        var uError = document.getElementById("error_box");
        var upassward = document.getElementById("password");

    uError.innerHTML = "<br>";
    // oUname

 if(uname.value.length<6 || uname.value.length >12){
        uError.innerHTML="用户名6-12";
        return;
    }else if ((uname.value.charCodeAt(0)>=48) && (uname.value.charCodeAt(0)<=57)){
        uError.innerHTML="第一位只能是字母";
        return;
    } else for (var i=0 ; i<oUname.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="只能是字母或数字";
            return;
        }
    }
    if(upassward.value.length<6 || upassward.value.length>12){
        uError.innerHTML="密码6-12位";
        return;
    }
 window.alert("登录成功！")
}


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

</head>

<body>
<div class="box" >
    <div class="jar" ><h2>欢迎注册</h2></div>

        <div class="input_box">
            账号　     <input id="name" type="text" placeholder="请输入用户名">   </div><br>
        <div class="input_box">
            密码　     <input id="password" type="password" placeholder="请输入密码"></div><br>
         <div class="input_box">
            再输入     <input id="passwordagain" type="password" placeholder="请再次输入密码"></div><br>
        <div id="error_box"><br></div>
         <div class="ja">
            <button onclick="fnLogin()" >注册</button></div>
    </div>
</div>
</body>
</html>

div{
    margin:0 auto;
    text-align:center;
    backgroup-color:lightblue;
}
.box{
    width:500px;
    height:300px;
    border-color:blue;
    border-style:groove;
    border-width:1px;
    margin-top:100px;
}

 .input_box{
    font-size:18px;
    font-weight:bold;
 }
.ja{
    width:100px;
    height:30px;
    boder-style:hidden;
}

function fnLogin() {
        var uname = document.getElementById("name")
        var uError = document.getElementById("error_box")
        var upassword = document.getElementById("password")
        var upasswordagain = document.getElementById("passwordagain")
        uError.innerHTML="<br>"
         if(uname.value.length<6 || uname.value.length >20){
        uError.innerHTML="用户名应为6到20字符";
        return;
    }else if ((uname.value.charCodeAt(0)>=48) && (uname.value.charCodeAt(0)<=57)){
        uError.innerHTML="第一位只能是字母";
        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="用户名只能为数字或者字母";
            return;
        }
    }
    if(upassword.value.length<6 || upassword.value.length>12){
        uError.innerHTML="密码应为6到20字符";
        return;
    }
    if (upasswordagain.value!=upassword.value ) {
        uError.innerHTML = "重新输入你的密码";
        return;
    }

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

posted @ 2017-10-31 19:29  JaTae  阅读(378)  评论(0)    收藏  举报