实例详解js实现登录与注册界面
本文主要为大家详细介绍了js实现登录与注册界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你，请先登陆！</title> <script type="text/javascript" src="../static/jsp/lx.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="../static/css/lx.css"> </head> <body> <p class="box"> <h2>登陆</h2> <p class="input_box"> <input id="uname" type="text" name="user" placeholder="请输入用户名"> </p> <p class="input_box"> <input id="upass" type="password" name="psw" placeholder="请输入密码"> </p> <p id="error_box"><br></p> <p class="input_box"> <button type="button" class="btn btn-primary" onclick="fnLogin()">登陆</button>     <a href="regist.html"><input type="button" class="btn btn-info" name="regist" value="注册"></a> </p> </p> </body> </html>
css代码：
*{
margin: 0;
padding: 0;
font-family: 微软雅黑;
font-size: 12px;
}
.box{
width: 390px;
height: 320px;
border: solid 1px #ddd;
background: #FFF;
position: absolute;
left: 50%;
top:42%;
margin-left: -195px;
margin-top: -160px;
text-align: center;
}
.box h2{
font-weight: normal;
color:#666;
font-size: 16px;
line-height: 40px;
overflow: hidden;
text-align: center;
border-bottom: solid 1px #ddd;
background: #f7f7f7;
}
.input_box{
width:350px;
padding-bottom: 15px;
margin: 0 auto;
overflow: hidden;
}javascript代码：
function fnLogin() {
var oUname = document.getElementById("uname")
var oUpass = document.getElementById("upass")
var oError = document.getElementById("error_box")
var isError = true;
if (oUname.value.length > 20 || oUname.value.length < 6) {
oError.innerHTML = "用户名请输入6-20位字符";
isError = false;
return;
}else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
oError.innerHTML = "首字符必须为字母";
return;
}else for(var i=0;i<oUname.value.charCodeAt(i);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 (oUpass.value.length > 20 || oUpass.value.length < 6) {
oError.innerHTML = "密码请输入6-20位字符"
isError = false;
return;
}
window.alert("登录成功")
}注册界面html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你，请先登陆！</title> <script type="text/javascript" src="../static/jsp/lx.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <p id="container" style="width: 400px" align="center"> <p id="header" style="background-color: aquamarine"> <h2 align="center">注册</h2> </p> <p id="content"> <p align="center">账号: <input id="uname" type="text" name="user" placeholder="账号首字符为字母"> </p> <p align="center">密码: <input id="upass" type="password" name="psw" placeholder="请输入密码"> </p> <p id="error_box"><br></p> <br> <button onclick="fnLogin()" class="btn btn-info">注册</button> </p> <p style="background-color: aquamarine"> <i>版权信息@</i> </p> </p> </body> </html>
运行结果如下：
相关推荐：
以上是实例详解js实现登录与注册界面的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
小红书怎么注册多个账号？注册多个账号会被发现吗？
Mar 25, 2024 am 09:41 AM
小红书作为一款集社交和电商于一身的平台，吸引了越来越多的用户加入。有些用户希望能够注册多个账号以便更好地体验和小红书互动。那么，小红书怎么注册多个账号呢？一、小红书怎么注册多个账号？1.使用不同手机号码注册目前，小红书主要采用手机号码注册账号的方式。用户有时会尝试购买多个手机号码卡，并利用它们注册多个小红书账号。但这种做法有一些限制，因为购买多个手机号码卡比较麻烦且成本较高。2.使用邮箱注册除了手机号码，邮箱也可以用来注册小红书账号。用户可以准备多个邮箱地址，然后分别用这些邮箱地址注册账号。不过
漫蛙漫画账号怎么注册
Feb 28, 2024 am 08:00 AM
在漫蛙漫画平台上，有着丰富的漫画资源，等待大家探索。只要轻松进入漫蛙漫画的官方平台，就可以畅享各类精彩的漫画作品。每个小伙伴都能根据自己的喜好，轻松找到心仪的漫画进行阅读。那么究竟该如何注册漫蛙漫画的官方账号呢，本站小编就将为大家带来这篇详细的教程攻略，希望能帮助到各位有需要的小伙伴们。漫蛙漫画-官方入口：https://fuw11.cc/mw666漫蛙漫画app下载地址：https://www.siemens-home.cn/soft/74440.html漫蛙漫画非大陆地区入口：https:/
wallpaperengine登录别的号后下载别人的壁纸怎么办
Mar 19, 2024 pm 02:00 PM
当你在自己电脑上登过别人steam账号之后，恰巧这个别人的账号也有wallpaper软件，切换回自己账号之后steam就会自动下载别人账号订阅的壁纸，用户可以通过关闭steam云同步解决。wallpaperengine登录别的号后下载别人的壁纸怎么办1、登陆你自己的steam账号，在设置里面找到云同步，关闭steam云同步。2、登陆你之前登陆的别人的steam账号，打开wallpaper创意工坊，找到订阅内容，然后取消全部订阅。（以后防止找不到壁纸，可以先收藏再取消订阅）3、切换回自己的stea
小红书怎么登录以前的账号？它换绑后原来号丢失了怎么办？
Mar 21, 2024 pm 09:41 PM
随着社交媒体的迅速发展，小红书已经成为许多年轻人分享生活、探索新产品的热门平台。在使用过程中，有时用户可能会遇到登录以前账号的困难。本文将详细探讨如何解决小红书登录旧账号的问题，以及如何应对更换绑定后可能遗失原账号的情况。一、小红书怎么登录以前的账号？1.找回密码登录如果长时间未登录小红书，可能导致账号被系统回收。为了恢复访问权限，你可以尝试通过找回密码的方式重新登录账号。操作步骤如下：（1）打开小红书App或官网，点击“登录”按钮。（2）选择“找回密码”。（3）输入你注册账号时所使用的手机号码
怎么注册小红书账号？注册小红书账号需要什么？
Mar 22, 2024 am 10:16 AM
小红书，一个集生活、娱乐、购物、分享于一体的社交平台，已经成为众多年轻人日常生活中不可或缺的一部分。那么，如何注册小红书账号呢？一、怎么注册小红书账号？1.打开小红书官网或下载小红书APP。点击下方的“注册”按钮，您可以选择不同的注册方式。目前，小红书支持手机号、邮箱以及第三方账号（如微信、QQ、微博等）进行注册。3.填写相关信息。根据选择的注册方式，填写相应的手机号、邮箱或第三方账号信息。4.设置密码。设置一个强壮的密码，确保账号安全。5.完成验证。根据提示完成手机验证或邮箱验证。6.完善个人
Discuz后台登录问题解决方法大揭秘
Mar 03, 2024 am 08:57 AM
Discuz后台登录问题解决方法大揭秘，需要具体代码示例随着互联网的快速发展，网站建设变得越来越普遍，而Discuz作为一款常用的论坛建站系统，受到了许多站长的青睐。然而，正是因为其功能强大，有时候我们在使用Discuz的过程中会遇到一些问题，比如后台登录问题。今天，我们就来大揭秘Discuz后台登录问题的解决方法，并且提供具体的代码示例，希望能帮助到有需要
小红书账号怎么注册？它的账号异常怎么恢复？
Mar 21, 2024 pm 04:57 PM
小红书作为全球最受欢迎的生活方式分享平台之一，吸引了大量用户关注。那么，如何注册小红书账号呢？本文将为您详细介绍小红书账号的注册流程，并解答小红书账号异常如何恢复的问题。一、小红书账号怎么注册？1.下载小红书APP：在手机应用商店搜索并下载小红书APP，安装完成后打开。2.注册账号：打开小红书APP后，点击首页右下角的“我”按钮，然后选择“注册”。3.填写注册信息：根据提示填写手机号码、设置密码、验证码等注册信息。4.完善个人资料：注册成功后，根据提示完善个人资料，如姓名、性别、生日等。5.设置
快手电脑版怎么登录-快手电脑版的登录方法
Mar 04, 2024 pm 03:30 PM
近日有一些小伙伴咨询小编快手电脑版怎么登录?下面就为大家带来了快手电脑版的登录方法，有需要的小伙伴可以来了解了解哦。第一步：首先在电脑的浏览器上百度搜索快手官网。第二步：在搜索结果列表里面选取第一条。第三步：进入到快手官网主页面后，点击视频的选项。第四步：点击右上角的用户头像。第五步：在弹出的登录菜单里面点击二维码登录。第六步：之后打开手机上的快手，点击左上角的图标。第七步：点击二维码标志。第八步：在我的二维码界面点击右上角的扫描图标之后，扫描电脑上的二维码即可。第九步：最后电脑版的快手就登录成
