码迷,mamicode.com
首页 > Web开发 > 详细

原生js记住密码

时间:2017-10-12 23:11:36      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:记住密码   cookie   

登录界面,记住用户名和密码。

login.jsp

(说明:我们这个是做为微信公众号上面的登录页面)

可参考http://www.w3school.com.cn/js/js_cookies.asp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/jsp/weixin/head.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>登录页面</title>
	<link rel="stylesheet" type="text/css" href="weixin/css/login/login.css">
</head>
<body>
	<section class="login_banner">
		<div>
			<p class="login_logo"><img src="weixin/images/login/login_logo.png"></p>
			<p class="login_title"><img src="weixin/images/login/login_title.png"></p>
			<p class="login_info">四川大大有限公司</p>
		</div>
	</section>
	<section class="login_module">
		<div>
			<p class="login_phone">
				<input type="text" name="loginname" id="loginname" value="" placeholder="请输入用户名" />
			</p>
			<p class="login_password">
				<input type="password" name="password" id="password" placeholder="请输入密码" value=""/>
			</p>
			<span class="login_rember"><input type="checkbox"  id="isStored" value="">记住密码</span>
			<p class="login_btn" onclick="severCheck();"><b>登录</b></p>
		</div>
			<div>
			</div>
	</section>
	<p class="login_bottom">Copyright 2017 四川大大 All Right Reseverd</p>
	
	<script type="text/javascript">
	 window.onload=function(){ 
         init();
     }
		//服务器校验
		function severCheck(){
			if(check()){
				var loginname = $("#loginname").val();
				var password = $("#password").val();
				var code = "KENTRASOFT_USER"+loginname+",ERP,"+password+"KENTRASOFT_PWD";
				//是否记住密码  
			    if(document.getElementById("isStored").checked==true){
			      setall();  //如果勾选了记住密码,则将用户名密码放在cookie中
			    }else {  
			      resetCookie(); //否则清空cookie 
			    }   
				$.ajax({
					type: "POST",
					url: ‘login_login_wechat‘,
					data: {KEYDATA:code},
					dataType:‘json‘,
					cache: false,
					success: function(data){
						if("success" == data.result){
							window.location.href="weixin_index";
						}else if("usererror" == data.result){
							$("#loginname").tips({
								side : 1,
								msg : "用户名或密码有误",
								bg : ‘#FF5080‘,
								time : 15
							});
							$("#loginname").focus();
						}else{
							$("#loginname").tips({
								side : 1,
								msg : "缺少参数",
								bg : ‘#FF5080‘,
								time : 15
							});
							$("#loginname").focus();
						}
					}
				});
			}
		}

		$(document).keyup(function(event) {
			if (event.keyCode == 13) {
				$(".login_btn").trigger("click");
			}
		});
		
		//客户端校验
		function check() {

			if ($("#loginname").val() == "") {

				$("#loginname").tips({
					side : 2,
					msg : ‘用户名不得为空‘,
					bg : ‘#AE81FF‘,
					time : 3
				});

				$("#loginname").focus();
				return false;
			} else {
				$("#loginname").val(jQuery.trim($(‘#loginname‘).val()));
			}

			if ($("#password").val() == "") {

				$("#password").tips({
					side : 2,
					msg : ‘密码不得为空‘,
					bg : ‘#AE81FF‘,
					time : 3
				});

				$("#password").focus();
				return false;
			}

			$("#loginbox").tips({
				side : 1,
				msg : ‘正在登录 , 请稍后 ...‘,
				bg : ‘#68B500‘,
				time : 10
			});

			return true;
		}

		//获取cookie
// 		if(self!=top){top.location=self.location;}  
		var bikky = document.cookie;  
		function getCookie(name) {   
		    var index = bikky.indexOf(name + "=");  
		    if (index == -1) return null;  
		    index = bikky.indexOf("=", index) + 1;  
		    var endstr = bikky.indexOf(";", index);  
		    if (endstr == -1) endstr = bikky.length;  
		    return unescape(bikky.substring(index, endstr));  
		}  
		  
		var today = new Date();  
		var expiry = new Date(today.getTime() + 28 * 24 * 60 * 60 * 1000);
		//设置到cookie  
		function setall()  
		{  
		    var j_username = $("#loginname").val();  
		    setCookie("j_username",j_username);  
		    var j_password = $("#password").val();  
		    setCookie("j_password",j_password);
		    setCookie("ifRemberCheck","yes");
		}  
		function setCookie(name, value) {   
		      document.cookie=name + "=" + escape(value) + "; expires=" + expiry.toGMTString();  
		    bikky = document.cookie;   
		}  
		//重置Cookie  
		function resetCookie() {  
		    var j_username = $("#loginname").val();  
		    var j_password = $("#password").val();  
		    setCookie("j_username", null);
		    setCookie("j_password", null);
		}  
		//进入页面初始化,如果cookie中有值,则直接从cookie中获取
		function init()  
		{ 
		    var j_username = getCookie("j_username"); 
		    console.log(j_username)
		    if (j_username != null && j_username != "null") {  
		    	$("#loginname").val(j_username);  
		    }  
		    var j_password = getCookie("j_password");
		    if (j_password != null && j_password != "null") {  
		    	$("#password").val(j_password);  
		    	document.getElementById("isStored").checked=‘false‘;
		    }  
		} 
		
	</script>
	<script>
		//TOCMAT重启之后 点击左侧列表跳转登录首页 
		if (window != top) {
			top.location.href = location.href;
		}
	</script>
	<c:if test="${‘1‘ == pd.msg}">
		<script type="text/javascript">
		$(tsMsg());
		function tsMsg(){
			alert(‘此用户在其它终端已经早于您登录,您暂时无法登录‘);
		}
		</script>
	</c:if>
	<c:if test="${‘2‘ == pd.msg}">
		<script type="text/javascript">
			$(tsMsg());
			function tsMsg(){
				alert(‘您被系统管理员强制下线‘);
			}
		</script>
	</c:if>
</body>
</html>


本文出自 “JianBo” 博客,请务必保留此出处http://jianboli.blog.51cto.com/12075002/1971629

原生js记住密码

标签:记住密码   cookie   

原文地址:http://jianboli.blog.51cto.com/12075002/1971629

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!