JavaScript 基础，登录前端验证
- <script></script>的三种用法：
- 放在<body>中
- 放在<head>中
- 放在外部JS文件
<!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>
- 三种输出数据的方式：
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 window.alert() 弹出警告框。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 "id" 属性来标识 HTML 元素。
- 使用 document.getElementById(id) 方法访问 HTML 元素。
- 用innerHTML 来获取或插入元素内容。
- 登录页面准备：
- 增加错误提示框。
- 写好HTML+CSS文件。
- 设置每个输入元素的id
- 定义JavaScript 函数。
- 验证用户名6-20位
- 验证密码6-20位
- 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 基础，登录前端验证的更多相关文章
- JavaScript | 基础表单验证（纯Js）
———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...
- JavaScript实现登录滑动验证
来自于GitHub, 如何快速访问GitHub 先附上效果图 划到一半停止回自己回去的 PS: 附上代码,有需要自己更改, <!DOCTYPE html> <html lang=&q ...
- JavaScript 基础，登录验证
1.<script></script>的三种用法: a.放在<body>中 b.放在<head>中 c.放在外部JS文件中 <!DOCTYPE h ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 第三篇：web之前端之JavaScript基础
前端之JavaScript基础 前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- JavaScript中登录名的正则表达式及解析(0基础)
简言 在JavaScript中,经常会用到正则表达式来进行模式匹配.例如,登录名验证,密码强度验证,字符串查找或替换等操作.现在就开始吧,零基础写出你的第一个正则表达式! 在做用户注册时,都会用到登录 ...
- Javascript配合jQuery实现流畅的前端验证
做前端时一般都习惯用JavaScript进行表单的简单验证比如非空验证和正则表达式验证,这样过滤后的数据提交到服务端再由专门的控制器做数据处理,这样能减轻服务器的负担,下面看一下前端验证的简单步骤: ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
随机推荐
- blast | diamond 输出结果选择和解析 | 比对
之前的文章:构建NCBI本地BLAST数据库 (NR NT等) | blastx/diamond使用方法 | blast构建索引 | makeblastdb 本地运行blast时,需要指定out fo ...
- c++-pimer-plus-6th-chapter06
Chapter Review 1 Both version give the same answers, but the if else version is more efficient. Cons ...
- JavaScript Transpilers: 为什么需要用它们？Babel的使用介绍。
英文原文 https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them 摘译(文章内的代码有些过期 ...
- SSD: ReLU6
1.在src\caffe\proto\caffe.proto中搜索message LayerParameter,在optional ReLUParameter relu_param = 123之后添加 ...
- PHP如何定义类及其成员属性与操作
1.类的定义: 类的关键字定义使用class 1.定义一个空类 Class Person{}; 2.定义一个有成员属性和操作的类 Class Person{ //成员属性 $name = ' ...
- 20165309 技能学习经验与C语言
技能学习经验与C语言 技能学习经验 你有什么技能比大多人(超过90%以上)更好?针对这个技能的获取你有什么成功的经验?与老师博客中的学习经验有什么共通之处? 从小到大,或是出于兴趣.或是出于父母的要求 ...
- 廖雪峰网站：学习python函数—递归函数（四）
# 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数 # 计算阶乘n! = 1 x 2 x 3 x ... x n,用函数fact(n)表示,可以看出: # fact ...
- Shell里面获取路径的方式
1. $0 #!/bin/sh echo $0 2.shFile=$(readlink -f $0) #!/bin/sh shFile=$() shDir=$(dirname ${shFile})ec ...
- Mysql可重复读原理
mysql可重复读现象及原理分析 InnoDB---可重复读隔离级别的底层实现原理 概念 可重复读的实现 Repeatable Read(可重复读):一个事务在执行过程中可以看到其他事务已经提交的新插 ...
- jcmd
1.jps 2.jcmd 1761[pid] PerfCounter.print 查看指定进程的性能统计信息 概述 在JDK1.7以后,新增了一个命令行工具 jcmd.他是一个多功能的工具,可以用它来 ...