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