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

最新推荐文章于 2020-06-20 17:48:28 发布
最新推荐文章于 2020-06-20 17:48:28 发布
阅读量228 收藏
点赞数
文章标签： 前端 sketch javascript ViewUI
原文链接：http://www.cnblogs.com/jzx-089/p/7766278.html
版权

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Personal Website-登录.</title>
    <link href="../static/css/js23.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../static/js/js23.js"></script>

</head>
<body>
<div><h1><span style="font-size: 200px;color: darkmagenta;align:center">"代"</span>你飞!</h1></div>

<div class="box">
    <div>
        <a href="js23.html">登录</a>
        <a style="color: antiquewhite">*</a>
        <a href="js24.html">注册</a>
    </div>
    <br>

    <div class="name" align="center">
        <svg class="iconphone" width="20px" height="20px" viewBox="0 0 20 20">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
               sketch:type="MSPage">
                <g id="2-copy-2" sketch:type="MSArtboardGroup"
                   transform="translate(-505.000000, -357.000000)" fill="#666">
                    <path d="M517.388314,366.868305 C519.068314,366.001784 520.220053,364.252653 520.220053,362.231784 C520.220053,359.350479 517.883966,357.014392 515.002662,357.014392 C512.121357,357.014392 509.78527,359.350479 509.78527,362.231784 C509.78527,364.252653 510.936575,366.001784 512.616575,366.868305 C508.246575,367.938305 505.002662,371.879175 505.002662,376.57961 C505.002662,376.81961 505.197009,377.014392 505.437444,377.014392 C505.677444,377.014392 505.872227,376.81961 505.872227,376.57961 C505.872227,371.537001 509.960053,367.449175 515.002662,367.449175 C520.04527,367.449175 524.133096,371.537001 524.133096,376.57961 C524.133096,376.81961 524.327444,377.014392 524.567879,377.014392 C524.807879,377.014392 525.002662,376.81961 525.002662,376.57961 C525.002662,371.879175 521.758749,367.938305 517.388314,366.868305 L517.388314,366.868305 Z M510.654835,362.231784 C510.654835,359.830479 512.601357,357.883957 515.002662,357.883957 C517.403966,357.883957 519.350488,359.830479 519.350488,362.231784 C519.350488,364.632653 517.403966,366.57961 515.002662,366.57961 C512.601357,366.57961 510.654835,364.632653 510.654835,362.231784 L510.654835,362.231784 Z"
                          id="id" sketch:type="MSShapeGroup"></path>
                </g>
            </g>
        </svg>
        <input
                id="uname" type="text" placeholder="请输入用户名:">

    </div>
    <br>
    <div class="email" align="center">
        <svg class="iconphone" width="20px" height="20px" viewBox="0 0 20 20">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
               sketch:type="MSPage">
                <g id="2-copy-2" sketch:type="MSArtboardGroup"
                   transform="translate(-505.000000, -407.000000)" fill="#666">
                    <path d="M515,418.304324 C514.12782,418.304324 513.421091,418.888119 513.421091,419.608723 C513.421091,419.995004 513.624357,420.341947 513.947394,420.580774 L513.947394,421.782554 C513.947394,422.262857 514.418637,422.652187 515.00003,422.652187 C515.581302,422.652187 516.052667,422.262857 516.052667,421.782554 L516.052667,420.580774 C516.375703,420.341947 516.579,419.995004 516.579,419.608723 C516.57897,418.888119 515.87221,418.304324 515,418.304324 L515,418.304324 L515,418.304324 Z M522.368454,414.391327 L521.315788,414.391327 L521.315788,412.217421 C521.315788,409.335657 518.488418,407 515,407 C511.511582,407 508.684212,409.335657 508.684212,412.217421 L508.684212,414.391327 L507.631576,414.391327 C506.178003,414.391327 505,415.364503 505,416.565234 L505,424.826193 C505,426.026824 506.178003,427 507.631576,427 L522.368424,427 C523.821422,427 525,426.026899 525,424.826193 L525,416.565234 C525.00003,415.364478 523.821422,414.391327 522.368454,414.391327 L522.368454,414.391327 L522.368454,414.391327 Z M515,407.869583 C517.906571,407.869583 520.263152,409.816309 520.263152,412.217396 L520.263152,414.391302 L509.737544,414.391302 L509.737544,412.217396 L509.736848,412.217396 C509.736848,409.816309 512.093459,407.869583 515,407.869583 L515,407.869583 L515,407.869583 Z M523.947364,424.826093 C523.947364,425.546622 523.240604,426.130392 522.368454,426.130392 L507.631606,426.130392 C506.759396,426.130392 506.052667,425.546622 506.052667,424.826093 L506.052667,416.565234 C506.052667,415.84468 506.759426,415.260835 507.631606,415.260835 L522.368454,415.260835 C523.240635,415.260835 523.947364,415.844705 523.947364,416.565234 L523.947364,424.826093 L523.947364,424.826093 L523.947364,424.826093 Z"
                          id="pw" sketch:type="MSShapeGroup"></path>
                </g>
            </g>
        </svg>
        <input
                type="password" id="upass" placeholder="请输入密码:">

    </div>
    <br>


    <div id="error_box"></div>
    <div>
        <button id="login" onclick="myLogin()">登录</button>

    </div>
    <br>

    <div>
        <input value="1" name="remember" id="remember" type="checkbox">
        <label for="remember" style="color: darkmagenta">保存登录信息</label>&nbsp;&nbsp;&nbsp;&nbsp;
        <input value="2" name="remember" id="remember" type="checkbox">
        <label for="remember" style="color: darkmagenta">记住我</label>
    </div>

    <br>
    <a class="register-login" href="js24.html">进入注册界面</a>

    <div id="footer" style="background-color: transparent;clear:both;text-align:center;">版权 ． duym@jzx</div>
</div>


<script>
    document.getElementById("demo").innerHTML = Date();
    document.write(Date())
</script>

</body>
</html>

登录CSS

 

* {
    margin: 0;
    padding: 0;
    font-family: 微软雅黑;
    font-size: 12px;
}

body {
    background-image: url(http://pic.58pic.com/58pic/14/57/45/91A58PICxYE_1024.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

div.box {
    font-size: 20px;
    text-align: center;
    margin-left: 600px;
    border-style: hidden;
    background-color: lightgray;
    margin-right: 600px;
    text-align: center;
    color: cornsilk;
    border-radius: 10px;
    padding: 20px;
    bottom: 100px;
    width: 600px;
}



#login {
    color: #fff;
    background: dodgerblue  ;
    border-style: hidden;
    font-size: 40px;
    font-family: 华文行楷;
    width: 360px;
    padding: 9px 18px;
}

.iconphone{
    border-radius: 0px;
    border-style: hidden;
    height: 20px;
    width: 20px;
    padding: 0px;
    background-color:lightgray ;
    border-style: none;


}

.register-login {
    font-size: 30px;
    font-family: 楷体;
    color: blueviolet;

}

#error_box {
    color: red;
}

h1 {
    color: chartreuse;
    font-family: 华文隶书;
    font-size: 100px;
    text-align: center;
}

#uname {
    border-radius: 10px;
    border-style: hidden;
    height: 20px;
    width: 300px;
    padding: 20px;

}

#upass {
    border-radius: 10px;
    border-style: hidden;
    height: 20px;
    width: 300px;
    padding: 20px;

}

#footer {
    color: black;
    font-size: 20px;
}

a:link {
    text-decoration: none;
}
a:hover{
    color: white;
    text-decoration: none;
}

a {
    font-size: 50px;
    font-family: 幼圆;
    color: deepskyblue;
}

登录JavaScript

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

    oError.innerHTML = "<br>"
    //uname
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        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;
        }

    }
    //upass
    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "密码为6到20位。";
        return;
    }
    window.alert("登录成功!!")

}

运行结果：

注册HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Personal Website-注册.</title>
    <link href="../static/css/js24.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../static/js/js24.js"></script>
</head>
<body>
<div><h1><span style="font-size: 200px;color: darkmagenta;align:center">"代"</span>你飞!</h1></div>

<div class="box">
    <div>
        <a href="js23.html">登录</a>
        <a style="color: antiquewhite">*</a>
        <a href="js24.html">注册</a>
    </div>
    <br>

    <div class="name" align="center">
        <input id="uname" type="text" placeholder="登录账号:">
    </div>
    <br>
    <div class="telephone" align="center">


        <input type="tel"
               id="uuser"
               placeholder="请输入你的手机号:">
    </div>
    <br>

    <div class="email" align="center">
        <input
                type="password" id="upass" placeholder="设置你的密码:">
    </div>
    <br>
    <div class="email" align="center">
        <input
                type="password" id="upass2" placeholder="请输入你的密码:">
    </div>
    <br>
    <div>
        <div id="error_box"></div>
        <div>
            <button id="register" onclick="myRegister()">注册</button>

        </div>
        <a class="login-register" href="js23.html">进入登录界面</a>


        <div id="footer" style="background-color: transparent;clear:both;text-align:center;">版权 ． duym@jzx</div>
    </div>
</div>

</body>
</html>

注册CSS

*{
    margin: 0;
    padding: 0;
    font-family: 微软雅黑;
    font-size: 12px;
}
a {
    font-size: 50px;
    font-family: 幼圆;
    color: deepskyblue;
}
body{
    background-image:url(http://pic.58pic.com/58pic/14/57/45/91A58PICxYE_1024.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

div.box {
    font-size: 20px;
    text-align: center;
    margin-left: 600px;
    border-style: hidden;
    background-color: lightgray;
    margin-right: 600px;
    text-align: center;
    color: cornsilk;
    border-radius: 10px;
    padding: 20px;
    bottom: 100px;
}


.login-register{
    font-size: 30px;
    font-family: 楷体;
    color: blueviolet;

}

#error_box{
    color: red;
    font-size: larger;
}
h1{
    color: chartreuse;
    font-family: 华文隶书;
    font-size: 100px;
    text-align: center;
}
#register{
    color: #fff;
    background: #42c02e;
    border-style: hidden;
    font-size: 40px;
    font-family: 华文行楷;
    width: 340px;
    padding: 9px 18px;

}
#uname{
    border-radius: 10px;
    border-style: hidden;
    height: 10px;
    width: 300px;
    padding: 20px;

}
#upass{
    border-radius: 10px;
    border-style: hidden;
    height: 10px;
    width: 300px;
    padding: 20px;

}
#uuser {
    border-radius: 10px;
    border-style: hidden;
    height: 10px;
    width: 300px;
    padding: 20px;

}
#upass2{
    border-radius: 10px;
    border-style: hidden;
    height: 10px;
    width: 300px;
    padding: 20px;

}
#footer{
    color: black;
    font-size: 20px;
}
a:link{
    text-decoration: none;
}
a:hover{
    color: white;
    text-decoration: none;
}
.iconfont{
    font-family: iconfont!important;
    font-style: normal;
    font-weight: 400!important;
    -webkit-font-smoothing: antialiased;
}

注册JavaScript

function myRegister() {
    var oUname = document.getElementById("uname");
    var oUpass = document.getElementById("upass");
    var oError = document.getElementById("error_box");
    var oUuser = document.getElementById("uuser");
    var oUpass2 = document.getElementById("upass2");

    oError.innerHTML = "<br>"
    //uname
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        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;
        }
    }
    for (var i = 0; i < 12; i++) {
        if (((oUuser.value.charCodeAt(i) < 48) || (oUuser.value.charCodeAt(i) > 57)) || oUuser.value.length != 11) {
            oError.innerHTML = "请输入正确手机号";
            return;
        }
    }

    //upass
    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        document.getElementById('error_box').innerHTML = "密码必须在6-20个字符之间";
        return;
    }
    if (oUpass2.value != oUpass.value) {
        oError.innerHTML = "两次输入的密码必须一致";
        return;
    }
    window.alert("注册成功！")

}

运行结果：

登录原图：

 

注册原图：

 

 

转载于:https://www.cnblogs.com/jzx-089/p/7766278.html

dff12151251
关注
编写一个用户注册信息填写验证程序，注册信息包括用户名、密码、EMAIL地址、联系电话。要求验证联系电话中只能输入数字，EMAIL地址中需要包括“@”符号，密码域不少于6位。要求联系电话在输入过程中保证不能有非数字，而其他两个域在点击注册按钮时再进行数据检查。
06-06
编写一个用户注册信息填写验证程序，注册信息包括用户名、密码、EMAIL地址、联系电话。要求验证联系电话中只能输入数字，EMAIL地址中需要包括“@”符号，密码域不少于6位。要求联系电话在输入过程中保证不能有非数字，而其他两个域在点击注册按钮时再进行数据检查。
前端登录注册不容易啊
weixin_30609331的博客
07-19 141
这个就留给自己看好了，懒得排版了，反正就自己知道 登录：可以达到点击按钮周围其他display：none;显示登录页面部分 <script src="../JqueryDemo/jquery.min.js"></script> <script src="../JqueryDe...
前端代码+登陆与注册
08-28
在前端开发中，登录与注册是用户交互的基础部分，它们为用户提供访问网站或应用的身份验证。本项目聚焦于实现这两个核心功能，通过`register.html`和`Login.html`两个文件来构建用户界面，并借助`css`、`img`和`js`...
前端移动端登录注册页
07-24
在前端开发领域，移动设备上的登录注册页面是用户体验的关键部分，尤其在当今互联网产品高度竞争的环境下。这个项目，"前端移动端登录注册页"，涵盖了基础的用户认证流程，包括登录和注册，以及一系列安全验证机制。...
前端—HTML—登录注册页面
07-07
在前端开发领域，HTML、CSS和JavaScript是构建网页的基础技术，尤其在创建用户交互界面时，如登录和注册页面。本篇文章将详细讲解如何利用这些技术来设计一款舒适、高端且适用的登录注册模板。 首先，HTML...
登录与注册界面的实现，同时实现前后端的交互功能
06-26
总结，实现“登录与注册界面的实现，同时实现前后端的交互功能”涉及到了多个IT领域的知识，包括Spring框架、SpringMVC、MyBatis的使用，前端界面设计，以及安全性、异常处理和测试等。这个过程既考验开发者的编码...
精品源码 / 网页模板 / 移动端 / 登录注册页面
12-26
一个好的登录注册页面不仅要美观，还要能够引导用户顺畅地完成操作流程。 此外，作为前端网页设计的一部分，这个模板可能采用了流行的前端框架，如React、Vue.js或Angular，或者基于HTML5、CSS3和JavaScript的基础...
请教大佬们注册客户端验证问题?
liuji0517的博客
04-15 252
本人前端web开发学萌一个，感觉学的好迷茫。 在下面这个程序中，js中我主要写了验证用户名1-6位中文字符、密码6-12位至少含一位字母和数字、且两次输入密码应该一致。 然后问题来了，咋也不知道为啥就验证的时候好像就没进入js，然后就根本没验证，这是哪里错了？这是第一个问题。 第二个问题，就是验证密码时的那个正则表达式我不太会，不知道对不对，百度找的。如果有错误，麻烦指正。 第三个问题，就是在...
html—登录及注册页面设计
热门推荐
anliao6401的博客
10-18 3万+
一、文字处理 1、文字加粗：<strong><\strong> 2、文字换行：<br/> 3、文档标题：title 4、整体文字居中<body align="center"> 5、整体字体颜色：<body style="color:white"> 6、段落：<p> 7、标题：<h1>~&lt...
SpringBoot项目完成一个注册登录功能,页面模板必须是Thymeleaf
阿火
06-20 1926
1、完成一个注册登录功能，数据不需要保存到数据库。不需要分页。必须是SpringBoot项目，页面模板必须是Thymeleaf （1）引入LayUI或Bootstrap等其它美化页面（5） 登录页面 login.html <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <!--为了让页面有更好的提示效果--> <head> <meta charset="UT
vue.js写多账号登录、注册、登录成功页面（登录成功）
菜鸟的博客
10-12 5056
本篇是该系列（vue.js写多账号登录、注册、登录成功页面）的最后一篇了，想看登录，注册，请看上篇and 上上篇。登录成功页面主要实现了，更换头像和读登录的用户信息。 我是直接引用的官网地址做的（&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"&gt;&lt;/script&gt;），没有下。 首先，来看一...
js前端md5加密生成校验位，.net后端进行校验完整性
yangzx1986的博客
11-18 2866
突然有个安全性的要求，前端和后端数据交互要验证完整性，防止篡改，我就使用表单数据拼接然后生成校验位，到了服务器端再用同样办法进行校验位验证，弄了半天发现前后端生成的md5字符串总是不一样。找了好多终于解决了 1.前端 js  下面是md5.js文件 /* * A JavaScript implementation of the RSA Data Security, Inc.
登录注册框手机号和验证码校验--前端部分
weixin_30929295的博客
09-28 498
开发的很多场景中都会用到手机号的校验和验证码的校验 js $(document).ready(function(){ //点击关闭按钮关闭弹出层 $(".close-btn").click(function(){ $("layer").hide(); }); //只有再手机号和验证码验证为有效后，点击领取按钮跳出弹出层事件才生效 $('[n...
写一个登录注册的前端页面
最新发布
04-01
很抱歉，作为AI语言模型，我不能直接提供前端页面的代码。但是，我可以给您一些关于前端页面设计的建议： 1. 页面应该简洁明了。登录和注册表单应该清晰地标注，用户不应该感到困惑。 2. 保证表单的可访问性。对于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值