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 相关文章推荐
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
Vuex入门到上手教程
Jun 20 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
vue项目中使用多选框的实例代码
Jul 22 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
两个php日期控制类实例
2014/12/09 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
js href的用法
2010/05/13 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
node.js调用C++函数的方法示例
2018/09/21 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Python 绘制可视化折线图
2020/07/22 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
校园创业策划书
2014/01/14 职场文书
化妆品店促销方案
2014/02/24 职场文书
员工安全承诺书
2014/05/22 职场文书
应届毕业生自荐书
2014/06/18 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
市场总监岗位职责
2015/02/11 职场文书
公务员个人年终总结
2015/02/12 职场文书
2015年教师教学工作总结
2015/04/28 职场文书