bootstrap表单

form-horizontal

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@include file="/common/common.jsp"%>
<form id="form" name="form" class="form-horizontal" method="post"
    action="${pageContext.request.contextPath}/user/editPassword.shtml">
    <section class="panel panel-default">
        <div class="panel-body">
            <div class="form-group">
                <label class="col-sm-2 control-label">旧密码</label>
                <div class="col-sm-2">
                    <input type="password" class="form-control" placeholder="请输入旧密码"
                        name="password" id="password">
                </div>
                <label class="col-sm-2 control-label">新密码</label>
                <div class="col-sm-2">
                    <input type="password" class="form-control" placeholder="请输入新密码"
                        name="newpassword" id="newpassword">
                </div>
                <label class="col-sm-2 control-label">新密码</label>
                <div class="col-sm-2">
                    <input type="password" class="form-control" placeholder="请输入新密码"
                        name="newpassword" id="newpassword">
                </div>
                <label class="col-sm-2 control-label">新密码</label>
                <div class="col-sm-2">
                    <input type="password" class="form-control" placeholder="请输入新密码"
                        name="newpassword" id="newpassword">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">新密码</label>
                <div class="col-sm-2">
                    <input type="password" class="form-control" placeholder="请输入新密码"
                        name="newpassword" id="newpassword">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-3 control-label">确认密码</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" placeholder="请输入确认密码"
                        name="confirmpassword" id="confirmpassword">
                </div>
            </div>
        </div>
        <footer class="panel-footer text-right bg-light lter">
            <button type="submit" class="btn btn-success btn-s-xs">修改</button>
        </footer>
    </section>
</form>
<table class="table table-condensed">
    <caption>边框表格布局</caption>
    <thead>
        <tr>
            <th>名称</th>
            <th>城市</th>
            <th>邮编</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
        </tr>
        <tr>
            <td>Sachin</td>
            <td>Mumbai</td>
            <td>400003</td>
        </tr>
        <tr>
            <td>Uma</td>
            <td>Pune</td>
            <td>411027</td>
        </tr>
    </tbody>
</table>

<script>
//加入数据校验证
$(function() {
    $("#form").validate({
        submitHandler : function(form) {
            ly.ajaxSubmit(form, {
                type : "post",
                dataType : "json",
                success : function(data) {
                    if (data == "success") {
                        layer.msg('您的密码重置成功');
                        $('#password').val('');
                        $('#confirmpassword').val('');
                        $('#newpassword').val('');
                    } else {
                        layer.msg(data);
                    }
                }
            });
        },
        rules : {
            "password" : {
                minlength: 6,
                required : true
            },
            "newpassword" : {
                minlength: 6,
                required : true
            },
            "confirmpassword": {
                required : true,
                minlength: 6,
                equalTo: "#newpassword"
            }
        },
        messages : {
            "password" : {
                required : "请输入旧密码",
                //minlength: jQuery.format("密码不能小于{0}个字 符")
            },
            "newpassword" : {
                required : "请输入新密码",
                //minlength: jQuery.format("密码不能小于{0}个字 符")
            },
            "confirmpassword" : {
                required : "请输入确认密码",
                //minlength: jQuery.format("密码不能小于{0}个字 符"),
                equalTo : "新密码和确认密码不一致"
            }
        },
        errorPlacement : function(error, element) {// 自定义提示错误位置
            var length = error.html().length;
            if(length != 0){
                layer.tips(error.html(), element, {
                      tips: [1, '#78BA32'],
                      tipsMore: true
                });
            }
        },
        success : function(label) {// 验证通过后
            layer.close();
        }
    });
});
</script>

form-inline