使用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=" 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/