1. <script></script>的三种用法：
    1. 放在<body>中
    2. 放在<head>中
    3. 放在外部JS文件
    4. <!DOCTYPE html>
      
<html lang="en">
      
<head>

    <meta charset="UTF-8">
      
    <title>登录</title>
      
</head>
      
<body>
      
<p id="denglu"></p>
      
    <script>
      
     document.write(Date());
      
     document.getElementById("denglu").innerHTML=Date();
      
</script>
      
<button type="button" onclick=window.alert("请先登录")>登录</button>
      
</body>
      
</html>
  2. 三种输出数据的方式：
    1. 使用 document.write() 方法将内容写到 HTML 文档中。
    2. 使用 window.alert() 弹出警告框。
    3. 使用 innerHTML 写入到 HTML 元素。
      1. 使用 "id" 属性来标识 HTML 元素。
      2. 使用 document.getElementById(id) 方法访问 HTML 元素。
      3. 用innerHTML 来获取或插入元素内容。
  3. 登录页面准备：
    1. 增加错误提示框。
    2. 写好HTML+CSS文件。
    3. 设置每个输入元素的id
  4. 定义JavaScript 函数。
    1. 验证用户名6-20位
    2. 验证密码6-20位
  5. onclick调用这个函数。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>MIS问答平台</title>

    <link rel="stylesheet" type="text/css" href="T4.css">

    <script >

        function myLogin(){

            var oUname = document.getElementById("uname");

            var oError = document.getElementById("userpass");

            var uerror=document.getElementById("errorone");

         if(uname.value.length<6 ||umane.value.length>20){

                uerror.innerHTML="用户名长度不可超过6-20";

            }

        }

    </script >

</head>

</body>

<div class ="mubiao">

    <h2>登录</h2>

    <div class="inputone" >

            用户名:<input type="text"name="用户名"placeholder="请输入用户名"><br>

    </div>

    <div class="inputone" >

           密码:<input type="password"name="密码"placeholder="请输入密码"><br>

    </div>

    <div id="errorone"><br></div>

    <div class="login ">

        <button onclick="login()">会员登录</button>

        </div>

     <h2>版权  duym</h2>>

     </div>

     </body>

     </html>

h2{ text-align: center;margin-bottom:0;background-color:#66b3ff;}

.mubiao{

    width: 500px;

    height:400px;

    margin: auto;

    background-color:#ffffff;

}

.inputone{

    height:50px;

    margin: 0 auto;

}

.login{

    witdth:40px;

    height:50px;

}
t4{ text-align: center;margin-bottom:0;background-color:#66b3ff;}
.mubiao{
    width: 500px;
    height:400px;
    margin: auto;
    background-color:#ffffff;
}
.inputone{
    height:50px;
    margin: 0 auto;

}
.login{
    witdth:40px;
    height:50px;

}

JavaScript 基础，登录前端验证的更多相关文章

  1. JavaScript | 基础表单验证（纯Js）

    ———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...

  2. JavaScript实现登录滑动验证

    来自于GitHub, 如何快速访问GitHub 先附上效果图 划到一半停止回自己回去的 PS: 附上代码,有需要自己更改, <!DOCTYPE html> <html lang=&q ...

  3. JavaScript 基础，登录验证

    1.<script></script>的三种用法: a.放在<body>中 b.放在<head>中 c.放在外部JS文件中 <!DOCTYPE h ...

  4. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  5. 第三篇：web之前端之JavaScript基础

    前端之JavaScript基础   前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...

  6. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  7. JavaScript中登录名的正则表达式及解析(0基础)

    简言 在JavaScript中,经常会用到正则表达式来进行模式匹配.例如,登录名验证,密码强度验证,字符串查找或替换等操作.现在就开始吧,零基础写出你的第一个正则表达式! 在做用户注册时,都会用到登录 ...

  8. Javascript配合jQuery实现流畅的前端验证

    做前端时一般都习惯用JavaScript进行表单的简单验证比如非空验证和正则表达式验证,这样过滤后的数据提交到服务端再由专门的控制器做数据处理,这样能减轻服务器的负担,下面看一下前端验证的简单步骤: ...

  9. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

随机推荐

  1. InitializingBean和DisposableBean

    InitializingBean 记住一点:InitializingBean接口为bean提供了初始化方法的方式,它只包括afterPropertiesSet方法,凡是继承该接口的子类,在初始化bea ...

  2. 常用音频协议介绍&&有关音频编码的知识与技术参数

    (转载)常用音频协议介绍 会议电视常用音频协议介绍及对比白皮书 一.数字化音频原理:声音其实是一种能量波,因此也有频率和振幅的特征,频率对应于时间轴线,振幅对应于电平轴线.通常人耳可以听到的频率在20 ...

  3. android--------实现Activity和Fragment通信的面向对象的万能接口

    前言 开发一个app时,常用Activity和Fragment,由于操作方便Fragment越来越受欢迎,这样就避免不了Activity和Fragment.Fragment和Fragment之间的通信 ...

  4. 5 项目---自定义用户模型以及轮播图图片url返回格式

    创建自定义的用户模型类  1. 用命令创建users 应用 2. 将users 注册到settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'd ...

  5. J - Jesus Is Here HDU - 5459 (递推)

    大意: 定义$f_1="c",f_2="ff",f_n=f_{n-2}+f_{n-1}$, 求所有"cff"的间距和. 记录c的个数, 总长 ...

  6. Misha and Palindrome Degree CodeForces - 501E (回文串计数)

    大意: 给定字符串, 求多少个区间重排后能使原串为回文串. 先特判掉特殊情况, 对于两侧已经相等的位置之间可以任意组合, 并且区间两端点至少有一个在两侧相等的位置处, 对左右两种情况分别求出即可. # ...

  7. 『TensorFlow × MXNet』SSD项目复现经验

    『TensorFlow』SSD源码学习_其一:论文及开源项目文档介绍 『TensorFlow』SSD源码学习_其二:基于VGG的SSD网络前向架构 『TensorFlow』SSD源码学习_其三:锚框生 ...

  8. 剑指offer-调整数组内奇偶数顺序

    题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 解题思路 时间换 ...

  9. 1.11 UML 类图（多看多用就熟悉了）（节选自：《大话设计模式》）

    类:用矩形框表示(类图分三层) 第一层显示类的名称:(如果是抽象类,就用斜体显示) 第二层是类的特性,通常就是字段和属性: 第三层是类的操作,通常是方法或行为. (注意前面的符号,“+” 表示 pub ...

  10. Hadoop---HDFS读写流程

    Hadoop---HDFS HDFS 性能详解 HDFS 天生是为大规模数据存储与计算服务的,而对大规模数据的处理目前还有没比较稳妥的解决方案. HDFS 将将要存储的大文件进行分割,分割到既定的存储 ...