登陸頁面的設計

前幾天在做登陸界面時，遇到了這麼幾個要求：

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請求服務端，查詢結果是正確的就跳轉頁面，錯誤就提醒他，這個用戶名或密碼是不正確的，效果圖如下：