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 相关文章推荐
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
前端常见跨域解决方案(全)
Sep 19 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
php二维数组排序详解
2013/11/06 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
PHP培训要多少钱
2017/06/06 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
js压缩利器
2007/02/20 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
Python中Yield的基本用法
2020/10/18 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
幼儿教师考核制度
2014/01/25 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
Java 多态分析
2022/04/26 Java/Android