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. Ubuntu自带截图工具screenshoot

    ​

  2. java异常：java.lang.NullPointerException

    /** * 功能:空指针异常测试 */ /* Object[] parameters1=null; if(parameters1.length>0&&parameters1!=n ...

  3. 非常棒的——python Deep learning 学习笔记

    https://www.cnblogs.com/zhhfan/p/9985991.html

  4. android -------- Lint优化工具

    什么是 Lint Lint 是Android Studio 提供的 代码扫描分析工具,它可以帮助我们发现代码结构/质量问题,同时提供一些解决方案,而且这个过程不需要我们手写测试用例. Lint 发现的 ...

  5. html标签积累

    <marquee>滚动标签 <marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容.&l ...

  6. 1.2 面向对象 Object-oriented

    前导课程 1.UML(统一建模语言) 2.OOAD Concept(Object-oriented Analysis and Design 概念) 3.Design Pattern(设计模式) 4.面 ...

  7. Pandas读取文件

    如何使用pandas的read_csv模块以及其他读取文件的模块?? 一起来看一看 Pandas中read_csv和read_table的区别 注:使用pandas读取文件格式为pandas特有的da ...

  8. 发送http请求，get和post两种请求方式

    GET请求 GetMethod getMethod=null; String datas = "json=" + plain; HttpClient httpClient = ne ...

  9. h5网页跳转到app，若未安装app，则跳转app下载页面

    if(isAndroid){ android(); function android(){ var ifr = document.createElement("iframe"); ...

  10. Highcharts 环境配置

    Highcharts 环境配置 本章节我们将为大家介绍如何在网页中使用 Highcharts. Highcharts 依赖于 jQuery,所以在加载 Highcharts 前必须先加载 jQuery ...