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 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
小程序实现背景音乐播放和暂停
Jun 19 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获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
nginx 设置多个站跨域
2021/03/09 Servers
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
python读取各种文件数据方法解析
2018/12/29 Python
详解如何设置Python环境变量?
2019/05/13 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
遗嘱继承公证书
2014/04/09 职场文书
大专生求职信
2014/06/29 职场文书
家长学校培训材料
2014/08/20 职场文书
领导班子四风表现材料
2014/08/23 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
环卫工作个人总结
2015/03/04 职场文书
在职证明书模板
2015/06/15 职场文书
工作态度怎么写
2015/06/25 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python