使用html5中required屬性

直接上代碼

 <form action="${pageContext.request.contextPath}/login/main.do" method="post" id="loginform" >
                            <div class="login_content">
                                <div id="showError" class="errorContainer" style=" padding-top: 0px;margin-bottom: -24px;display:none;">
                               　　 <img src="${pageContext.request.contextPath}/images/command_failed.png" id="errorImg" style="margin-top:-2px;margin-right:5px;"/>
                                　　<span id="erroMessage"></span>
                                </div>
                                <div class="input_box" >
                                    <span class="sp_text">用戶名：</span>
　　　　　　　　　　　　　　　　　　　　　　<input type="text" id="username"  name="name" maxlength="50" AUTOCOMPLETE="off" required="required" oninvalid="setCustomValidity('用戶名不能為空，請輸入')" oninput="setCustomValidity('')"/>
                                </div>
                                <div class="input_box">
                                    <span class="sp_text">密碼：</span>
　　　　　　　　　　　　　　　　　　　　　　<input type="password" id="password" name="password" maxlength="50" AUTOCOMPLETE="off" required="required" oninvalid="setCustomValidity('warning')" oninput="setCustomValidity('')"/>
                                </div>
                                <div id="advance_text" style="display: none;">
                                <div class="input_box"  >
                                    <span class="sp_text">認證模式：</span>
                                    <select class="text" name="" style="width: 143px">
                                    <option value="0" style="color: #333">普通用戶</option>
                                    </select>
                                </div>
                                </div>
                                <div class="input_box">
                                    <!--  <span class="i_button_text"> 
                                 <a class="i_button_input"  href="javascript:loginValidate()">登錄</a>
                                    </span> --> 
                                <button class="button button-raised    button-box button-jumbo button-small  button-pill"><i class="fa fa-thumbs-up">登錄</i></button>
                                <span>
                                <a href="javascript:advance();" class="i_button_input advanceBtn_nomal"  id="advanceBtn" >高級</a>
                                </span>
                                
                                </div>
                                
                            </div>
                    </form> 

js代碼

$(function() {
    document.getElementById('username').focus();
    $('#username').bind("focus",cleanError);
    $('#password').bind("focus",cleanError);
    $('#erroMessage').bind('change',noneOrblockImg);
    
    $("#loginform").bind("submit",loginform)
    
});
function loginform(){//檢查用戶輸入信息格式是否正確
    
     $("#erroMessage").text("登錄中...");
     
    $.ajax({
        url:"loginValidate.do",
        type:'post',
        data:{"name":name,"password":pwd},
        dataType:'json', 
        success:function(data) {
             if(data.state==0) {
                
                $("#loginform").submit();
            } else{
                
                $("#erroMessage").text(data.message);
                return false;
            }
        },
        error:function(data){
            //console.log(data);
            
        }
    });  
}

最后推薦一個專做按鈕的開源網站

http://www.bootcss.com/p/buttons/