JavaScript登录验证基础教程


Posted in Javascript onNovember 01, 2017

本文实例为大家分享了js登录验证的具体代码,供大家参考,具体内容如下

1.<script></script>的三种用法:

   1.放在<body>中

   2.放在<head>中

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你,请先登陆!</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <script type="text/javascript">alert('这是javascript代码')</script>
</head>
<body>
<p id="demo">www</p>
<script>
 document.getElementById('demo').innerHTML = Date()
</script>
<div id="container" style="width: 400px" align="center">
 <div id="header" style="background-color: aquamarine">
  <h2 align="center">登陆</h2>
 </div>
 <div id="content">
  <form>
   <p align="center">账号:
    <input id="uname" type="tex" name="user" placeholder="请输入用户名">
   </p>
   <p align="center">密码:
    <input id="upass" type="password" name="psw">
   </p>
   <div id="error_box"><br></div>
   <br>
   <button onclick="fnLogin()">登陆</button>
      
   <input type="button" name="regist" value="注册">
  </form>
 </div>
 <div style="background-color: aquamarine">
  <i>版权信息@</i>
 </div>
</div>
</body>
</html>

   3.放在外部JS文件中

document.getElementById('demo').innerHTML = Date() 

运行截图:

JavaScript登录验证基础教程

三种输出数据的方式:

   1.使用 document.write() 方法将内容写到 HTML 文档中。

   2.使用 window.alert() 弹出警告框。

   3.使用 innerHTML 写入到 HTML 元素。

      1).使用 "id" 属性来标识 HTML 元素。

      2).使用 document.getElementById(id) 方法访问 HTML 元素。

      3).用innerHTML 来获取或插入元素内容。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你,请先登陆!</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <script type="text/javascript">alert('这是javascript代码')</script>
</head>
<body>
<p id="demo">www</p>
<script>
 document.getElementById('demo').innerHTML = Date()
</script>
<button type="button" onclick=window.alert("number")>press</button>
</body>
</html>

运行截图:

JavaScript登录验证基础教程

3.登录页面准备:

    1.增加错误提示框。

    2.写好HTML+CSS文件。

    3.设置每个输入元素的id

4.定义JavaScript 函数。

      1.验证用户名6-20位

       2.验证密码6-20位

5.onclick调用这个函数。

 html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你,请先登陆!</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <link rel="stylesheet" type="text/css" href="../static/css/lx.css" rel="external nofollow" >
</head>
<body>
<div class="div" id="container">
 <div id="header" >
  <h2 class="h">登陆</h2>
 </div>
 <div id="content">
   <p class="p">账号:
    <input id="uname" type="text" placeholder="请输入用户名">
   </p>
   <p class="p">密码:
    <input id="upass" type="password" >
   </p>
   <div id="error_box"><br>
   </div>
   <button onclick="fnLogin()">登陆</button>
      
   <input type="button" name="regist" value="注册">
 </div>
 <div>
  <i>版权信息@</i>
 </div>
</div>

</body>
</html>

js文件代码如下:

function fnLogin() {
 var oUname = document.getElementById("uname")
 var oUpass = document.getElementById("upass")
 var oError = document.getElementById("error_box")
 if (oUname.value.length > 20 || oUname.value.length < 6) {
  oError.innerHTML = "请输入6-20位字符"
 }

 if (oUpass.value.length > 20 || oUpass.value.length < 6) {
  oError.innerHTML = "请输入6-20位字符"
 }
}

CSS代码如下:

.div {
 border: 5px solid #cccccc;
 width: 400px;
 text-align: center;
}
.p{
 font-family:华文楷体 ;
}
.h{
 font-family: 华文楷体;
}

运行截图:

JavaScript登录验证基础教程

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

Javascript 相关文章推荐
js控制浏览器全屏示例代码
Feb 20 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
vue打包后显示空白正确处理方法
Nov 01 #Javascript
js实现登录与注册界面
Nov 01 #Javascript
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
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
绿色家庭事迹材料
2014/05/01 职场文书
2014年创卫工作总结
2014/11/24 职场文书
市场部岗位职责
2015/02/12 职场文书
升职自荐信怎么写
2015/03/05 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
村官2015年度工作总结
2015/10/14 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
mysql sock文件存储了什么信息
2022/07/15 MySQL