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 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php数组键值用法实例分析
2015/02/27 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
常用DOM整理
2015/06/16 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
使用python加密自己的密码
2015/08/04 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
python collections模块的使用
2020/10/16 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
班子四风对照检查材料
2014/08/21 职场文书
教师业务学习材料
2014/12/16 职场文书