登录界面—记住用户名和密码
每次登录都需要输入完整的帐号与密码,那么可以设置记住密码,再次登录一点即可! 代码如下:
第一部分:文本框
<form id="login" name="login" action="login" method="post">
<div class="header">
<h2 class="logo png">
<a href="http://www.soarocean.com" target="_blank"></a>
</h2><span class="alt"></span></div>
<ul>
<li><label>用户名</label><input id="name" name="user.name" class="easyui-textbox" /></li>
<li><label>密 码</label><input id="pwd" name="user.password" class="easyui-textbox" type="password"</li>
<li class="submits"><input type="checkbox" id="checkpwd" /> <fontsize="-2" color="#999999">记住用户和密码</font> <input id="btn" class="submit" type="submit" OnClick="userLogin()" value="登录" /</li>
</ul>
</form>
第二部分:核心代码
<script language="javascript" type="text/javascript">
if (<%=request.getSession().getAttribute("flag")%>== "1") {
$.messager.alert("info", "用户名或密码错误,请重新登录!!!");
$("#name").textbox('setValue',"");
$("#pwd").textbox('setValue',"");
}
function addCookie(name, value, days, path) {
//添加设置cooki
var name = escape(name);
var value = escape(value);
var expires = new Date();
expires.setTime(expires.getTime() + days * 3600000 * 24);
//path=/,表示cookie能在整个网站下使用,path=/temp,表示cookie只能在temp目录下使用
path = path == "" ? "" : ";path=" + path;
//GMT(Greenwich Mean Time)是格林尼治平时,现在的标准时间,协调世界时是UTC
//参数days只能是数字型
var _expires = (typeof days) == "string" ? "" : ";expires="
+ expires.toUTCString();
document.cookie = name + "=" + value + _expires + path;
}
//获取cookie的值,根据cookie的键获取值
function getCookieValue(name) { //此处name是 userName,userPass
//用处理字符串的方式查找到key对应value
var name = escape(name);
//读cookie属性,这将返回文档的所有cookie
var allcookies = document.cookie;
//查找名为name的cookie的开始位置
name += "=";
var pos = allcookies.indexOf(name);
//如果找到了具有该名字的cookie,那么提取并使用它的值
if (pos != -1) { //如果pos值为-1则说明搜索"version="失败
var start = pos + name.length; //cookie值开始的位置
var end = allcookies.indexOf(";", start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置
if (end == -1)
end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie
var value = allcookies.substring(start, end); //提取cookie的值
return (value); //对它解码
} else { //搜索失败,返回空字符串
return "";
}
}
function deleteCookie(name, path) {
//根据cookie的键,删除cookie,其实就是设置其失效
var name = escape(name);
var expires = 0;
alert(expires)
path = path == "" ? "" : ";path=" + path;
document.cookie = name + "=" + ";expires="
+ expires.toUTCString() + path;
}
function userLogin() {
//用户登录,其中需要判断是否选择记住密码
//简单验证一下
var userName = document.getElementById("name").value;
if (userName == '') {
alert("请输入用户名。");
return;
}
var userPass = document.getElementById("pwd").value;
if (userPass == '') {
alert("请输入密码。");
return;
}
var objChk = document.getElementById("checkpwd");
if (objChk.checked) {
//添加cookie
addCookie("userName", userName, 30, "/");
addCookie("userPass", userPass, 30, "/");
//alert("记住了你的密码登录。");
getCookieValue();
// window.location.href = "http://www.baidu.com";
} else {
//alert("不记密码登录。");
addCookie("userName", userName, 0, "/");
addCookie("userPass", userPass, 0, "/");
deleteCookie();
// window.location.href = "http://www.baidu.com";
}
}
//实现功能,保存用户的登录信息到cookie中。当登录页面被打开时,就查询cookie
window.onload = function() {
var userNameValue = getCookieValue("userName");
//document.getElementById("name").value = userNameValue; //取出cookies的name赋给文本框
$("#name").textbox('setValue',userNameValue);
var userPassValue = getCookieValue("userPass");
//document.getElementById("pwd").value = userPassValue;
$("#pwd").textbox('setValue',userPassValue);
//alert(" "+document.getElementById("name").value+" "+userPassValue);
}
</script>
第三部分:css样式
<script type="text/javascript">
$(function(){
//定义最小长度
$.extend($.fn.textbox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: '请输入至少 {0}个字符.'
}
});
$('#name').textbox({
width:190,
height:24,
required:true,
validType:'minLength[0]',
delay:600,
missingMessage:"该项不允许为空!",
invalidMessage:"请重新输入用户名!",
prompt:'用户名',
iconCls:'icon-man',
iconWidth:38
});
$("#pwd").textbox({
width:190,
height:24,
required:true,
delay:1000,
validType:'minLength[5]',
missingMessage:"该项不允许为空!",
prompt:'登入密码',
iconCls:'icon-lock',
iconWidth:38
});
});
</script>
备注:
用户登录,其中需要判断是否选择记住密码
输入完成以后判断用户名密码是否正确,正确的话就添加设置其相应cookies,设置时间为30天
输入的用户名密码不合格但选择了记住密码时,直接调用deletecookies方法不起作用
并且是当前输入错误信息也被缓存了
添加设置相应的cookies,给其时间设置为0天,创建即过期。
否则是当前用户名密码没记住,但之后的每次登录获取的都是上一次缓存在cookies里面的数据
.用户名密码的文本框的属性 class="easyui-textbox" / css样式 $('#name').textbox({ })
和 取值方式 document.getElementById("name").value;同时使用时
会导致cookies中取出来的值无法显示在文本框,但是可以从文本框的alue中取到值
正确的做法是: $("#pwd").textbox('setValue',userPassValue);通过这种方式给文本框中赋值
让记住的用户名和密码显示在文本框中
登录界面—记住用户名和密码相关推荐
- ajax实现登录成功后设置cookie,使用jquery的cookie实现登录页记住用户名和密码的方法...
对于初学者来说,登录页记住用户名和密码的功能是经常会遇到的(通常会用javaee的api去实现),今天为大家介绍在前端页面直接用jquery实现该功能(比传统的方法简单多了),长话短说直接进入正题: ...
- EZStation登录界面的用户名、密码
Q:EZStation(宇视电脑客户端)登录界面的用户名.密码 A:EZStation登录界面的用户名是admin,密码是123456.
- 登录时记住用户名和密码及cookie案例应用
文章原址:http://www.jb51.net/article/33588.htm 登录样子,可以参考某一论坛的登录介面: 记住这些信息,可以使用Cookie来实现,更多Cookie应用,可参考 h ...
- logon oracle 密码 用户名_PLSQL自动登录,记住用户名密码日常使用技巧
配置启动时的登录用户名和密码 这是个有争议的功能,因为记住密码会给带来数据安全的问题. 但假如是开发用的库,密码甚至可以和用户名相同,每次输入密码实在没什么意义,可以考虑让PLSQL Develope ...
- PLSQL自动登录,记住用户名密码日常使用技巧
https://www.cnblogs.com/Chary/p/No00008F.html 配置启动时的登录用户名和密码 这是个有争议的功能,因为记住密码会给带来数据安全的问题. 但假如是开发用的库, ...
- 计算机怎样记住用户名和密码,电脑浏览器怎么记住登录密码 电脑浏览器记住登录密码方法【详解】...
浏览器,这是大家现在很熟悉也经常需要使用到的电脑工具.网上冲浪绝对少不了浏览器的配合,现在随着各种浏览器技术的进步,浏览器的功能也变得日趋的强大. 现在最给力的功能应该说是浏览器的自动记住密码的功能了 ...
- php 清除浏览器记住密码,网页登录中实现记住用户名和密码的功能(完成自动登录)...
网页记住用户名,就是我们经常会用到的,登录下面有一个复选框,可以设置用户7天内或1个月不需要登录,只要你进行本网站系统查询cookie是否有相差用户名与密码如果是就把信息提取再到数据库中查询,如果co ...
- 怎么找回计算机用户名密码怎么办,忘记了登录路由器的用户名与密码怎么办?...
经常有朋友忘记登录路由器的用户名与密码,因为一般路由器拉好网线,设置下路由器即可,后面就不需要设置了,但很多朋友为了考虑到路由器安全,一般均会修改默认密码,导致后期网络问题,需要登录路由器却发现忘记密 ...
- android怎么实现记住密码功能,安卓 实现记住用户名和密码功能
开发步骤: 在程序布局中键入复选框 在LoginActivity类中加入登陆处理的方法 3.在 LoginActivity类中加入是否记住密码的判断方法 4.运用SharedPreferences进行 ...
最新文章
- 面向过程(或者叫结构化)分析方法与面向对象分析方法到底区别在哪里?
- vue中如何加入横线_在word文档中如何快速添加页眉横线和删除页眉横线?
- 设计模式 — 行为型模式 — 中介者模式
- Spring Security 入门(五):在 Spring-Boot中的应用
- keep健身软件电脑版_一款不错的健身软件keep会员实现教程
- 7-237 有理数加法 (15 分)
- MQTT服务器Mosquitto安装及使用
- java Guide 面试指南
- matlab可以输出图像吗,MATLAB中使用程序输出图片
- 区块链开发入门书籍推荐
- 云计算三种架构(IaaS, PaaS, SaaS)及部署模型
- 机器学习基础 集成学习进阶(XGBoost+LightGBM)
- 惊心动魄的句子、帅帅酷酷的话
- 平面设计中立体表现技法
- 2021年12月13日面试题网络知识基础
- 计算机原理探险系列(一)CPU
- Python数据可视化-Pyecharts不同的主题风格
- 第四章第六节数据资产盘点-系统现状调研情况
- C# 图片背景变为透明
- WK型振弦式应变计混凝土变形监测