记住密码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<meta http-equiv=
"X-UA-Compatible"
content=
"IE=edge,chrome=1"
>
<title>记住密码</title>
</head>
<body>
<form id=
"loginForm"
>
//表单
<input id=
"user"
type=
"text"
placeholder=
"用户名"
><br>
<input id=
"pswd"
type=
"password"
placeholder=
"密码"
><br>
<label><input id=
"remember"
type=
"checkbox"
>记住密码</label><br>
<input type=
‘submit‘
value=
"登录"
>
</form>
<script>
window.onload =
function
(){
var
oForm = document.getElementById(
‘loginForm‘
);
var
oUser = document.getElementById(
‘user‘
);
var
oPswd = document.getElementById(
‘pswd‘
);
var
oRemember = document.getElementById(
‘remember‘
);
//页面初始化时,如果帐号密码cookie存在则填充
if
(getCookie(
‘user‘
) && getCookie(
‘pswd‘
)){
oUser.value = getCookie(
‘user‘
);
oPswd.value = getCookie(
‘pswd‘
);
oRemember.checked =
true
;
}
//复选框勾选状态发生改变时,如果未勾选则清除cookie
oRemember.onchange =
function
(){
if
(!
this
.checked){
delCookie(
‘user‘
);
delCookie(
‘pswd‘
);
}
};
//表单提交事件触发时,如果复选框是勾选状态则保存cookie
oForm.onsubmit =
function
(){
if
(remember.checked){
setCookie(
‘user‘
,oUser.value,7);
//保存帐号到cookie,有效期7天
setCookie(
‘pswd‘
,oPswd.value,7);
//保存密码到cookie,有效期7天
}
};
};
//设置cookie
function
setCookie(name,value,day){
var
date =
new
Date();
date.setDate(date.getDate() + day);
document.cookie = name +
‘=‘
+ value +
‘;expires=‘
+ date;
};
//获取cookie
function
getCookie(name){
var
reg = RegExp(name+
‘=([^;]+)‘
);
var
arr = document.cookie.match(reg);
if
(arr){
return
arr[1];
}
else
{
return
‘‘
;
}
};
//删除cookie
function
delCookie(name){
setCookie(name,
null
,-1);
};
</script>
</body>
</html>
验证框中是否有值,没有就提醒
- //提交
- $("#submit").click(function() {
- document.getElementById("name").innerText = "";
- document.getElementById("pswd").innerText = "";
- if($("#username").val()=="" || $("#username").val()==null){
- document.getElementById("name").innerText = "用户名不能为空";
- $("#username").focus();
- return false;
- }else if($("#password").val()=="" || $("#password").val()== null){
- document.getElementById("pswd").innerText = "密码不能为空";
- $("#password").focus();
- return false;
- }
- });