bootstrapValidator form表單驗證

1：引入相應的css和js

      css:

      <link href="<%=path%>/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

     <link href="<%=path%>/css/bootstrapValidator.min.css" rel="stylesheet" type="text/css">

       js:

      <script src="<%=path%>/js/jquery.min.js" type="text/javascript"></script>

    <script src="<%=path%>/js/bootstrap.min.js" type="text/javascript"></script>

     <script src="<%=path%>/js/bootstrapValidator.min.js"></script>

2:相應的html代碼：

<form id="formAddpic" method="post" class="form-horizontal" action="${pageContext.request.contextPath}/activity/addpic.shtml">
					<div class="form-group">
						<label for="picName" class="col-lg-3 control-label">姓名:</label>
						<div class="col-lg-5">
							<input type="text" class="form-control" id="picName" name="picName" placeholder="姓名">
						</div>
					</div>
					<div class="form-group">
						<label for="picDepartment" class="col-lg-3 control-label">部門:</label>
						<div class="col-lg-5">
							<input type="text" class="form-control" id="picDepartment" name="picDepartment" placeholder="部門">
						</div>
					</div>
					<div class="form-group">
						<label for="picPhone" class="col-lg-3 control-label">手機:</label>
						<div class="col-lg-5">
							<input type="text" class="form-control" maxLength="11" id="picPhone" name="picPhone" placeholder="手機">
						</div>
					</div>
					<div class="form-group">
						<label for="picEmail" class="col-lg-3 control-label">郵箱:</label>
						<div class="col-lg-5">
							<input type="email" class="form-control" id="picEmail" name="picEmail" placeholder="郵箱">
						</div>
					</div>
				       <div class="form-group">
         <div class="col-sm-offset-2 col-sm-5">
            <button type="submit" id="setpicbtn" class="btn btn-primary">確認</button>
         </div>
     </div>
				</form>

  

3：js代碼：

       

$(function() {
var formAddpic = $('#formAddpic');
$("#setpicbtn").bind("click", function() {
formAddpic.submit()
});
formAddpic.bootstrapValidator({
message : '輸入有誤',
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid : 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh'
},
fields : {
picName : {
validators : {
notEmpty : {
message : '負責人不能爲空'
}
}
},
picDepartment : {
validators : {
notEmpty : {
message : '部門不能爲空'
}
}
},
picPhone : {
validators : {
notEmpty : {
message : '手機號碼 必須填寫'
},
regexp : {
regexp : /^\d{11}$/,
message : '手機號碼爲11位數字'
}
}
},
picEmail : {
validators : {
notEmpty : {
message : '郵箱不能爲空'
},
emailAddress : {
message : '不是合法的郵件'
}
}
}
}
}).on(
'success.form.bv',
function(e) {
e.preventDefault();
var $form = $(e.target);
$.post($form.attr('action'), $form.serialize(),
function(result) {
$("#addpic").modal("hide");
$("#tablePic").bootstrapTable("refresh");
}, 'json');
})
});

4：