通用的login

最新推荐文章于 2022-11-17 23:29:35 发布

草原的胜利

最新推荐文章于 2022-11-17 23:29:35 发布

阅读量670

点赞数

本文链接：https://blog.csdn.net/u013309908/article/details/77450251

版权

jquery 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

validate

1 篇文章 0 订阅

订阅专栏

1.验证码的点击切换

//点击更换验证码
function reloadImage() {
//获取当前的时间作为参数，无具体意义
var timenow = new Date().getTime();
//每次请求需要一个不同的参数，否则可能会返回同样的验证码
//这和浏览器的缓存机制有关系，也可以把页面设置为不缓存，这样就不用这个参数了。
var obj = $("#myCanvas");
// obj.src="./randomController/randomImg.do?d="+timenow;
// obj.attr("src",'./randomController/randomImg.do?d="+timenow+"');
obj.attr("src", "./randomController/randomImg.do?d=" + timenow);
}

2.存储用户名和密码

$(function() {
var loginNameStr = "loginName";
var passwordStr = "password";
if((getCookie(loginNameStr) != null && getCookie(loginNameStr) != "") && getCookie(passwordStr) != null && getCookie(passwordStr) != "") {
$("#ace").attr("checked", "checked");
$("#username").val(getCookie(loginNameStr));
$("#password").val(getCookie(passwordStr));
}

//点击记住密码
$(".ace").click(function() {
//判断是否记住密码
//获取选择框的选择状态
var ischecked = $(this).is(":checked");
var loginName = "";
var loginPassword = "";

if(ischecked) {
loginName = $("#username").val();
loginPassword = $("#password").val();

}
setCookie(loginNameStr, loginName, 168); //168=7*24代表7天
setCookie(passwordStr, loginPassword, 168);
})
$("#ace").removeAttr("checked");

})

//记住密码存放cookie
//key,value,data
function setCookie(name, value, expiresHours) {
var cookieString = name + "=" + escape(value) + ";path=/";
if(+expiresHours > 0) {
//设置时间为7天
var date = new Date();
date.setTime(date.getTime() + (expiresHours * 3600 * 1000));
cookieString = cookieString + "; expires=" + date.toGMTString();
}
document.cookie = cookieString;
}
//记住密码，读取cookie
function getCookie(name) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for(var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if(arr[0] == name)
return arr[1];
}
return "";
}

3.validate校验（包含自定义的验证码校验）

//添加validate校验
$("#LoginForm").validate({
//离开输入框时触发onfocusout事件
onfocusout: function(element) {
$(element).valid();
},
rules: {
"username": {
required: true
},
"password": {
required: true
},
"code": {
required: true,
checkCode: true //自定义的validate方法
}
},
//设置错误信息
messages: {
"username": {
// required : "输入用户名"
required: function() {
$(".error1").html("");
return "请输入手机号"
}, //这是为了在有其他错误冲突时，将其他错误解决。再显示当前错误

},
"password": {
required: "输入密码"
},
"code": {
required: "输入验证码",
checkCode: "输入验证码有误"
}
},
/*错误提示位置*/
// errorPlacement:function(error,element){
// error.appendTo(element.siblings("span"));
// }
errorPlacement: function(error, element) { //第一个参数是错误的提示文字，第二个参数是当前输入框
//根据当前的选择框，找到父类,在其后面添加。让input与span错误信息是兄弟关系
$(element).parent().after(error); //用的是jQuery，这里设置的是，错误提示文本显示在当前文本框的兄弟span中
},
errorElement: "span"
});

//validate 检验结束

//自定义validate校验方法
//为验证码添加自定义校验方式；
$.validator.addMethod("checkCode", function() {
var result = false;
var code = $("#codetext").val(); //获取输入的验证码
//ajax校验验证码是否输入正确
$.ajax({
type: "post",
data: {
"code": code
},
dataType: "json",
url: "http://localhost:8080/SSM/login/checkCode.do",
success: function(data) {
if(data.resultCode == 1) {
result = true;
}
},

});
return result;

});

4.提交表单

//点击提交form表单
//不适用ajax，就在form的action中填写url
//使用ajax提交将表单序列化，请求返回值
function toSubmit() {
//对密码加密
//将密码和验证码绑定加密，在service中将数据库中的密码与验证码绑定，进行share加密。与这个js传值的password进行比较
// $("#password").val(sha256_digest($("#username").val() + $("#password").val()) +
// $("#codetext").val().toLowerCase());
// $("#LoginForm").submit();
$.ajax({
url: "http://localhost:8080/SSM/login/checkLogin.do",
data: $("#LoginForm").serialize(),
type: "post",
dataType: "json",
success: function(data) {
if(data.resultCode == 1) {
// window.location.href = '${ctx}' + '/LoginController/Main.do';
//window.location.href = 'http://localhost:8080/SSM' + '/LoginController/Main.do';
location.href="index.html";
} else {
alert(data.resultMessage);
}

},
error: function(data) {
alert("登录失败");
window.location.reload();
}

})

}