脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js登录验证基础教程

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="../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>
   &nbsp&nbsp&nbsp
   <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="../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="../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>
   &nbsp&nbsp&nbsp
   <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设计模式 – 职责链模式,结合实例形式分析了javascript职责链模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • 关于Javascript中defer和async的区别总结

    关于Javascript中defer和async的区别总结

    相信看过javascript高级程序设计的人，在javascript高级程序设计里，应该看到了介绍了有关defer和async的区别，可是比较浅显，而且也说得不是很清楚。下面我们来通过这篇文章来详细了解下dfer和async的区别。
    2016-09-09
  • javascript实现前端成语点击验证优化

    javascript实现前端成语点击验证优化

    这篇文章主要介绍了javascript实现前端成语点击验证优化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 微信小程序批量上传图片到七牛(推荐)

    微信小程序批量上传图片到七牛(推荐)

    这篇文章主要介绍了微信小程序批量上传图片到七牛,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-12-12
  • Javascript的表单验证-提交表单

    Javascript的表单验证-提交表单

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。通过本文给大家介绍Javascript的表单验证-提交表单，对javascript表单验证，提交表单相关知识感兴趣的朋友一起学习吧
    2016-03-03
  • JavaScript实现鼠标控制自由移动的窗口

    JavaScript实现鼠标控制自由移动的窗口

    这篇文章主要为大家详细介绍了JavaScript实现鼠标控制自由移动的窗口，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 使用formatter函数设置Echarts的tooltip中动态单位

    使用formatter函数设置Echarts的tooltip中动态单位

    这篇文章主要为大家介绍了使用formatter函数设置Echarts的tooltip中动态单位实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • Html和JS字符串中间加空格的简单实例

    Html和JS字符串中间加空格的简单实例

    最近遇到了个需求,需要在字符串的中间加上一两个字符串,所以下面这篇文章主要给大家介绍了关于Html和JS字符串中间加空格的相关资料,文中介绍的挺详细,需要的朋友可以参考下
    2023-02-02
  • 如何利用原生JS实现触摸滑动监听事件

    如何利用原生JS实现触摸滑动监听事件

    这篇文章主要给大家介绍了关于如何利用原生JS实现触摸滑动监听事件的相关资料,文中将实现的原理以及代码介绍的非常详细,需要的朋友可以参考下
    2021-06-06
  • 封装html的select标签的js操作实例

    封装html的select标签的js操作实例

    本文将为大家介绍下正如标题所示的select操作:清空所有的选项、添加一个选项、根据值、选中一个选项、根据下标，选中一个选项，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-07

最新评论