js实现登录与注册界面


Posted in Javascript onNovember 01, 2017

完成登录与注册页面的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>
<div class="box">
 <h2>登陆</h2>

 <div class="input_box">
  <input id="uname" type="text" name="user" placeholder="请输入用户名">
 </div>
 <div class="input_box">
  <input id="upass" type="password" name="psw" placeholder="请输入密码">
 </div>
 <div id="error_box"><br></div>
 <div 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>
 </div>



</div>
</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>
<div id="container" style="width: 400px" align="center">
 <div id="header" style="background-color: aquamarine">
  <h2 align="center">注册</h2>
 </div>
 <div 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>
  <div id="error_box"><br></div>
  <br>

  <button onclick="fnLogin()" class="btn btn-info">注册</button>
 </div>
 <div style="background-color: aquamarine">
  <i>版权信息@</i>
 </div>
</div>
</body>
</html>

运行结果如下:

js实现登录与注册界面

js实现登录与注册界面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单的js分页脚本
May 21 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
vue仿淘宝订单状态的tab切换效果
Jun 23 #Javascript
五步轻松实现zTree的使用
Nov 01 #Javascript
BootStrap TreeView使用实例详解
Nov 01 #Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 #Javascript
详解Vue组件实现tips的总结
Nov 01 #Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 #Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 #Javascript
You might like
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Python 爬虫的原理
2020/07/30 Python
python中的时区问题
2021/01/14 Python
python中if嵌套命令实例讲解
2021/02/25 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
情侣吵架检讨书
2014/02/05 职场文书
供货协议书
2014/04/22 职场文书
基层党组织整改方案
2014/10/25 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis