JavaScript登录验证基础教程
本文实例为大家分享了js登录验证的具体代码，供大家参考，具体内容如下
1.<script></script>的三种用法：
1.放在<body>中
2.放在<head>中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎你，请先登陆！</title>
<script type="text/javascript" src="../static/jsp/lx.js"></script>
<script type="text/javascript">alert('这是javascript代码')</script>
</head>
<body>
<p id="demo">www</p>
<script>
document.getElementById('demo').innerHTML = Date()
</script>
<div id="container" style="width: 400px" align="center">
<div id="header" style="background-color: aquamarine">
<h2 align="center">登陆</h2>
</div>
<div id="content">
<form>
<p align="center">账号:
<input id="uname" type="tex" name="user" placeholder="请输入用户名">
</p>
<p align="center">密码:
<input id="upass" type="password" name="psw">
</p>
<div id="error_box"><br></div>
<br>
<button onclick="fnLogin()">登陆</button>
   
<input type="button" name="regist" value="注册">
</form>
</div>
<div style="background-color: aquamarine">
<i>版权信息@</i>
</div>
</div>
</body>
</html>
3.放在外部JS文件中
document.getElementById('demo').innerHTML = Date()
运行截图：
三种输出数据的方式：
1.使用 document.write() 方法将内容写到 HTML 文档中。
2.使用 window.alert() 弹出警告框。
3.使用 innerHTML 写入到 HTML 元素。
1）.使用 "id" 属性来标识 HTML 元素。
2）.使用 document.getElementById(id) 方法访问 HTML 元素。
3）.用innerHTML 来获取或插入元素内容。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎你，请先登陆！</title>
<script type="text/javascript" src="../static/jsp/lx.js"></script>
<script type="text/javascript">alert('这是javascript代码')</script>
</head>
<body>
<p id="demo">www</p>
<script>
document.getElementById('demo').innerHTML = Date()
</script>
<button type="button" onclick=window.alert("number")>press</button>
</body>
</html>
运行截图：
3.登录页面准备：
1.增加错误提示框。
2.写好HTML+CSS文件。
3.设置每个输入元素的id
4.定义JavaScript 函数。
1.验证用户名6-20位
2.验证密码6-20位
5.onclick调用这个函数。
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎你，请先登陆！</title>
<script type="text/javascript" src="../static/jsp/lx.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/lx.css" rel="external nofollow" >
</head>
<body>
<div class="div" id="container">
<div id="header" >
<h2 class="h">登陆</h2>
</div>
<div id="content">
<p class="p">账号:
<input id="uname" type="text" placeholder="请输入用户名">
</p>
<p class="p">密码:
<input id="upass" type="password" >
</p>
<div id="error_box"><br>
</div>
<button onclick="fnLogin()">登陆</button>
   
<input type="button" name="regist" value="注册">
</div>
<div>
<i>版权信息@</i>
</div>
</div>
</body>
</html>
js文件代码如下：
function fnLogin() {
var oUname = document.getElementById("uname")
var oUpass = document.getElementById("upass")
var oError = document.getElementById("error_box")
if (oUname.value.length > 20 || oUname.value.length < 6) {
oError.innerHTML = "请输入6-20位字符"
}
if (oUpass.value.length > 20 || oUpass.value.length < 6) {
oError.innerHTML = "请输入6-20位字符"
}
}
CSS代码如下：
.div {
border: 5px solid #cccccc;
width: 400px;
text-align: center;
}
.p{
font-family:华文楷体 ;
}
.h{
font-family: 华文楷体;
}
运行截图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现登录验证码
Js代码: /** * 验证码 */ function yzm(){ var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
-
JavaScript登录验证码的实现
废话不多说,实现js登录验证码的功能需要下面两步,具体实现过程如下所示: 1.js var code="" ; //在全局 定义验证码 function createCode(){ code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); checkCode.value = ""; var selec
-
javascript和jquery分别实现用户登录验证
在上一篇文章http://www.jb51.net/article/83504.htm中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现. 一.用jquery的ajax实现的关键代码 实现如下 /*jquery实现 $(document).ready(function(){ $("#account").blur(function(event) { $.ajax({ type:"GET"
-
node.js+captchapng+jsonwebtoken实现登录验证示例
提到登录验证,大家肯定能想到的就是12306的验证码了吧.12306为了防止刷票,可以说是煞费苦心,验证码也越来越难识别,最终即使是人也可能识别不了了. 今天,小编就给大家说一下node如何实现图片验证码,以及使用token验证登录.学习本文你将学到: 1.使用captchapng生成图片验证码 2.使用jsonwebtoken实现登录验证 一.图片验证码生成(最后有全部代码) 首先,我们理一下流程,第一步服务器要随机生成一组四位数. 第二步,将这四位数用canvas绘图生成图片. 第三步,我们
-
JSP + Servlet实现生成登录验证码示例
随机生成四位数验证码,包括汉字,数字,英文大小写. 1.Servlet类 package servlet; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.geom.AffineTransform; import java.awt.geom.Line2D; i
-
用JS实现简单的登录验证功能
实现过程示意图 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <style> .ok { color: green; border: 1px solid green; } .error { color: red; border: 1px solid red; } </style> <s
-
JavaScript登录验证基础教程
本文实例为大家分享了js登录验证的具体代码,供大家参考,具体内容如下 1.<script></script>的三种用法: 1.放在<body>中 2.放在<head>中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> &l
-
Android开发之登录验证实例教程
本文所述实例源自一个项目开发中的登录验证功能,具体的要求就是,在Android端输入用户名和密码,在服务器端验证MySQL数据库中是否有此用户,实现之前当然首要的是,如何使Android端的数据发送到服务器端,具体的实现方法如下: 服务器端:ManageServlet.java代码如下: public class ManageServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServle
-
javascript cookie用法基础教程(概念,设置,读取及删除)
本文实例讲述了javascript cookie用法.分享给大家供大家参考,具体如下: 一.什么是 cookie? cookie 就是页面用来保存信息,比如自动登录.记住用户名等等. 二.cookie 的特点 同个网站中所有的页面共享一套 cookie cookie 有数量.大小限制 cookie 有过期时间 三.如何使用 cookie? 通过 document.cookie 来写入 cookie <!DOCTYPE HTML> <html lang="en-US"&
-
[推荐]javascript 面向对象技术基础教程
结果呢,看了大半天,有了一个大概的了解,细细一回味,好像什么都没懂... 这篇文章是参考<<javascript-the definitive guide,5th edition>>第7,8,9章而写成的,我也 会尽量按照原书的结构来说明javascript的面向对象技术(对象/数组->函数-->类/构造函数/原型).对一些我自己也拿捏不准的地方,我会附上原文的英文语句,供大家参考. 如果不做说明,则文中出现的所有英文语句(程序体除外)都是引自<<javas
-
javascript 面向对象技术基础教程第1/2页
javascript中的对象还没解释清楚怎么回事,一上来就直奔主题,类/继承/原型/私有变量.... 结果呢,看了大半天,有了一个大概的了解,细细一回味,好像什么都没懂... 这篇文章是参考<<javascript-the definitive guide,5th edition>>第7,8,9章而写成的,我也 会尽量按照原书的结构来说明javascript的面向对象技术(对象/数组->函数-->类/构造函数/原型).对一些我自己也拿捏不准的地方,我会附上原文的英文语句
-
JavaScript While 循环基础教程
while 循环 While 循环会在指定条件为真时循环执行代码块. 语法 while (条件) { 需要执行的代码 } 实例 本例中的循环将继续运行,只要变量 i 小于 5: while (i<5) { x=x + "The number is " + i + "<br>"; i++; } 提示:如果您忘记增加条件中所用变量的值,该循环永远不会结束.该可能导致浏览器崩溃. do/while 循环 do/while 循环是 while 循环的变体.
-
Javascript常用运算符(Operators)-javascript基础教程
javascript基础教程算术运算符 运算符 运算符说明 示例 示例说明 + 加法 x+y 如果x为整数2,y为整数5, x+y等于7 如果x为字符串"text1", y为字符串"fun", x+y则等于"text1fun" - 减法 x-y * 乘法 x*y / 除法 x/y % 两者相除求余数 x%y 如果x等于10, y等于3, x%y结果等于1 ++ 递增 x++ 如果x等于10, x++等于11 -- 递减 y-- 如果y等于10,
-
JavaScript基础教程——入门必看篇
JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS
-
Javascript基础教程之比较null和undefined值
JavaScript 中有两个特数值: undefined和null,在比较它们的时候需要留心.在读取未赋值的变量或试图读取对象没有的属性时得到的就是 undefined 值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Learn4UndefinedAndNull</title> </head
-
Python Flask基础教程示例代码
本文研究的主要是Python Flask基础教程,具体介绍如下. 安装:pip install flask即可 一个简单的Flask from flask import Flask #导入Flask app = Flask(__name__) #创建一个Flask实例 #设置路由,即url @app.route('/') #url对应的函数 def hello_world(): #返回的页面 return 'Hello World!' #这个不是作为模块导入的时候运行,比如这个文件为aa.py,