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 ...
随机推荐
- Kaggle泰坦尼克数据科学解决方案
原文地址如下: https://www.kaggle.com/startupsci/titanic-data-science-solutions --------------------------- ...
- LeetCode--026--删除排序数组中的重复项
问题描述: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...
- Javascript的常见数据类型以及相应操作
JavaScript概述 1 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织E ...
- 有一个问题关于stl函数中的算法问题
是不是stl中的算法函数中参数只要是和函数相关的就是函数对象和谓词?
- python-django rest framework框架之视图
视图 :常用 1和4 两种 1. 原始的APIView class IndexView(views.APIView): def get(self, request, *args, **kwargs): ...
- hdu-1817-polya
Necklace of Beads Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- 推荐系统评测指标—准确率(Precision)、召回率(Recall)、F值(F-Measure)
下面简单列举几种常用的推荐系统评测指标: 1.准确率与召回率(Precision & Recall) 准确率和召回率是广泛用于信息检索和统计学分类领域的两个度量值,用来评价结果的质量.其中精度 ...
- ThinkPHP3上传文件中遇到的问题
在用ThinkPHP3上传图片的开发过程中遇到如下几个问题: 上传根目录不存在!请尝试手动创建:./Uploads/: 上传的图片,中文名称乱码: 上传文件时会自动生成一个以当前日期命名的文件夹,并将 ...
- iOS的Cookie存取
当前一些公司为了快速出一款app,很多时候采用UINavigationController+WebView或者NavigationController+UITabbarVC+WebView的方式,这样 ...
- Vue 导入excel功能
html: <input type="file" @change="importf(this)" accept=".csv, applicati ...