JavaScript登录验证基础教程

 更新时间:2017年11月01日 14:21:34   作者:yishhaoo   我要评论

这篇文章主要为大家详细介绍了JavaScript登录验证的基础教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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="http://www.jb51.net/article/127346.htm/../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() 

运行截图:

三种输出数据的方式:

   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="http://www.jb51.net/article/127346.htm/../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>

运行截图:

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="http://www.jb51.net/article/127346.htm/../static/jsp/lx.js"></script>
 <link rel="stylesheet" type="text/css" href="http://www.jb51.net/article/127346.htm/../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: 华文楷体;
}

运行截图:

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • js实现的彩色方块飞舞奇幻效果

    js实现的彩色方块飞舞奇幻效果

    这篇文章主要介绍了js实现的彩色方块飞舞奇幻效果,涉及JavaScript响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
    2016-01-01
  • JavaScript中的函数模式详解

    JavaScript中的函数模式详解

    这篇文章主要介绍了JavaScript中的函数模式详解,本文讲解了创建函数的语法、函数表达式、命名函数表达式、函数的声明、函数声明与表达式、函数的提升、即时函数模式等内容,需要的朋友可以参考下
    2015-02-02
  • JavaScript使用ZeroClipboard操作剪切板

    JavaScript使用ZeroClipboard操作剪切板

    这篇文章主要为大家详细介绍了JavaScript使用ZeroClipboard操作剪切板的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JS数组返回去重后数据的方法解析

    JS数组返回去重后数据的方法解析

    本文主要分享了Js数组返回去重后的数据的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js如何判断输入字符串长度

    js如何判断输入字符串长度

    这篇文章主要介绍了js判断输入字符串长度,汉字算两个字符,字母数字算一个,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js 获取网络图片的高度和宽度的实现方法(变通了下)

    js 获取网络图片的高度和宽度的实现方法(变通了下)

    简单地说就是把图片放入一个自动伸缩的DIV中,然后获取DIV的宽和高!这个不错的变通,大家可以参考下。
    2009-10-10
  • 解决JavaScript实现省市联动过程中的bug

    解决JavaScript实现省市联动过程中的bug

    这篇文章主要为大家详细介绍了解决JavaScript实现省市联动过程中的bug,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Javascript中判断对象是否为空

    Javascript中判断对象是否为空

    这篇文章主要介绍了Javascript中判断对象是否为空,本文利用Javascript 中的对象就是一个字典的特性,检查对象中有没有键值对实现判断对象是否为空,需要的朋友可以参考下
    2015-06-06
  • 原生JS检测CSS3动画是否结束的方法详解

    原生JS检测CSS3动画是否结束的方法详解

    这篇文章主要介绍了原生JS检测CSS3动画是否结束的方法,结合实例形式分析了javascript事件响应及针对css3属性检测相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • js模拟3D场景效果代码打包

    js模拟3D场景效果代码打包

    这几个demo上星期平安夜做的,感觉效果不错,就放在出来,分享给大家
    2012-01-01

最新评论