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事件实现代码
Mar 12 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
js+css实现红包雨效果
Jul 12 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
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
隐性调用php程序的方法
2009/03/09 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
python类参数self使用示例
2014/02/17 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
python实现上传下载文件功能
2020/11/19 Python
Django视图和URL配置详解
2018/01/31 Python
python计算日期之间的放假日期
2018/06/05 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
如何编写python的daemon程序
2021/01/07 Python
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
化妆品店促销方案
2014/02/24 职场文书
企业办公室岗位职责
2014/03/12 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
mybatis 获取更新记录的id
2022/05/20 Java/Android