登陆页面的设计

前几天在做登陆界面时，遇到了这么几个要求：

1.不输入用户名和密码直接点击登陆，要提醒未输入用户名和密码。

2.输入错误密码或用户名，提醒错误，正确直接跳转页面。

具体实现，我是这样做的。

这里是form表单中的内容，具体就是在这里有个<span class="error_msg"></span> ，这个正常不现实，出现提示时显示

 <form>
         <span class="error_msg"></span> 
           <fieldset class="fieldset_msg">
            
            <input type="text" name="adminName" id="inputEmail" placeholder="请输入用户名">
            
            <input type="password" name="password" id="inputPassword" placeholder="请输入密码">
            <label>             
               <input class="dsubmit btn btn-large btn-primary login-bin" type="button" value="登录" >
            </label>
           </fieldset>
 </form>

JS中代码如下：

            $(".error_msg").hide();  
	  
	    // 默认账号输入框获得焦点  
	    $('input[name=adminName]').focus();  
	  
	    // 点击登陆  
	    $('.btn').click(function() {  
	        var adminName = $.trim($('input[name=adminName]').val());  
	        var password = $.trim($('input[name=password]').val());  
	        
	        if (adminName == '') {  
	            $(".error_msg").html('请填写用户名');  
	            $(".error_msg").show().fadeOut(2000);  
	            $('input[name=adminName]').focus();  
	            return false;  
	        } else if (password == '') {  
	            $(".error_msg").html('请填写密码');  
	            $(".error_msg").show().fadeOut(2000);  
	            $('input[name=password]').focus();  
	            return false;  
	        }  
	     
	        // 异步提交  
	        $.post('', {'adminName':adminName,'password':password} , function(json) { 
	        	
	            // 验证失败  
	            if (json.returnCode == "00") {  
	            	window.location="";
	  
	            // 成功  
	            } else {  
	            	 $(".error_msg").html('用户不存在或密码错误');  
	 	            $(".error_msg").show().fadeOut(2000);
	            }  
	        }, 'json')  
	    })  

首先是保证   error_msg 不显示， 然后给用户名设置一个默认焦点，给登录做一个鼠标监控事件，如果点击登录，判断用户名或密码是否为空，

为空就会给他一个提醒，不为空就会post请求服务端，查询结果是正确的就跳转页面，错误就提醒他，这个用户名或密码是不正确的，效果图如下：