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. eclipse---->自己常用的快捷键

    organize imports----> ctrl+shift+o  导入其他工程的类(在学习springboot的注解@EnableAutoConfiguration时用到) 关闭当前窗口的 ...

  2. Onsen UI快速入门 --Onsen UI

     一.什么是Onsen UI? 1.一系列专为移动应用程序设计的丰富UI组件.具有遵循原生iOS和Android设计标准的即时实现功能.免费使用,100%开源软件(Apache v2许可证).Onse ...

  3. android------eclipse运行错误提示 Failed to load D:\Android\sdk\build-tools\26.0.0-preview\lib\dx.jar

    更新了SDK后,在ecplise上运行项目时出现了一个问题. 一运行就提示这个错误:Your project contains error(s), please fix them before run ...

  4. Confluence 6 修改空间名字和标识

    希望修改空间名称: 在空间名称的边上,选择  图标. 输入新的空间名称,然后单击 保存(Save). 标识(Logo )- 修改空间的名称和标识. 重新组织(Reorder) - 拖动来从新组织快捷链 ...

  5. Spring AOP实现Mysql数据库主从切换（一主多从）

    设置数据库主从切换的原因:数据库中经常发生的是“读多写少”,这样读操作对数据库压力比较大,通过采用数据库集群方案, 一个数据库是主库,负责写:其他为从库,负责读,从而实现读写分离增大数据库的容错率.  ...

  6. harbor安装

    一.下载安装包https://github.com/goharbor/harbor/releases wget https://storage.googleapis.com/harbor-releas ...

  7. C/S,B/S的区别与联系

    C/S 是Client/Server 的缩写.服务器通常采用高性能的PC.工作站或小型机,并采用 大型数据库系统,如Oracle.Sybase.Informix 或SQL Server.客户端需要安装 ...

  8. Mac下配置/使用GitHub

    一.配置1. 查看是否有id_rsa.pub文件:cd ~/.ssh 2. 如果没有id_rsa.pub文件,执行如下命令来生成id_rsa.pub文件: ssh-keygen -t rsa -C & ...

  9. MapReduce(一)

    MapReduce(一) 一.介绍 百度百科: MapReduce是一种编程模型,用于大规模数据集(大于1TB)的并行运算.概念"Map(映射)"和"Reduce(归约) ...

  10. Java中关键字this、super的含义及使用

    Java语言中this的含义及作用: 关键字this用来指向当前实例对象(内存里正在运行的哪个实例对象),它的另一作用是用来区分对象的成员变量与方法的形参. 关键字super指的是当前对象里边的父对象 ...