登录页面登录名和密码错误提示解决方案

      登录页面需要做到登录名和密码错误的提示,效果如下图示所示:

 

       需要在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,不然默认异步进行,这里需要注意了。

  • 10
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值