登录页面需要做到登录名和密码错误的提示,效果如下图示所示:
需要在form提交的地方写下οnsubmit="return loginCheck();" ,onsubmit是再提交之前进行的方法,你可以在这个方法里写逻辑校验,如果不符合要求,返回 false,form就不会提交。代码如下:
<form action="<c:url value='/loginCheck.htm' />" method="post" id="login_form" οnsubmit="return loginCheck();">
//登录前校验用户名和密码是否正确
function loginCheck(){
var name = $("#loginUser").attr("value"); //用户名
var pwd = $("#loginPwd").attr("value"); //密码
var datas = new Object(); //返回来的结果
$.ajax({
type: "post",
contentType:"application/string",
dataType:"json",
async:false,
url : "${base}/loginResult.htm?name="+name+"&pwd="+pwd,
success: function (data) {
datas = eval("("+data+")");
}
});
if(datas.result == "nameFalse"){ //用户名不正确
layer.tips('用户名不存在!', '#loginUser', {
tips: [2, '#FF3030'],
time: 2000
});
return false;
}else if(datas.result == "pwdFalse"){ //密码不正确
layer.tips('密码不正确 !', '#loginPwd', {
tips: [2, '#FF3030'],
time: 2000
});
return false;
}else{
return true;
}
}
这里的提示是用到国产的插件layer.js,很实用,支持国产。运用jQuery 的ajax返回数据的时候注意把字符串转换成 json对象,运用eval()方法;
最后是我需要ajax运行之后,才开始下面的逻辑判断,需要配置 async:false,不然默认异步进行,这里需要注意了。