1.html頁面需要注意的是驗證字段需要用form-group包裹。需要引用相應的css和js。
<form id="jobForm" role="form" class="form-horizontal"> <input type="hidden" id="jobId" name="jobId" value=""> <div class="row"> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right"><i class="red fa fa-asterisk font-80"></i>作業分類</label> <div class="col-sm-8"> <input type="text" id='jobType' class="form-control" name="jobType" > </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right"><i class="red fa fa-asterisk font-80"></i>項目</label> <div class="col-sm-8"> <input type="text" id='projectName' class="form-control" name="projectName" > </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right">作業下發狀態</label> <div class="col-sm-8"> <select class="selectpicker form-control" id='issuedState' name="issuedState" tabindex="-98"> <option value="0">未下發</option> <option value="1">已下發</option> <option value="2">已更新</option> </select> </div> </div> <div class="form-group"> <button type="button" class="btn btn-primary" id="saveBtn" onclick="saveInfo()">保存</button> <button style='margin-left:20px;' type="button" name="submit" onclick="self.location=document.referrer;" class="btn btn-default">返回</button> </div> </div> </form>
2.js代碼
這是驗證輸出的文字
function formValidator(fm) { // 表單驗證 fm.bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { jobType: { message: '作業分類不能為空!', validators: { notEmpty: { message: '作業分類不能為空!' } } }, projectName: { message: '項目不能為空!', validators: { notEmpty: { message: '項目不能為空!' } } } } }); }
一般在頁面加載完時,我們要啟動第一次校驗
$(document).ready(function(){ formValidator($("#jobForm")); });
經過一系列操作后,我們需對表單驗證的內容進行清空處理,並且重新啟用驗證。
例如,我將form表單放入一個模態框中,在我每次打開模態框時,初始化form表單,並且重置表單中已經校驗過的值。
在點擊圖片中的加號時,我進行的操作
//移除上一次的校驗結果,重新添加表單校驗。 $("#jobForm").data('bootstrapValidator').destroy(); $('#jobForm').data('bootstrapValidator',null); formValidator($("#jobForm"));
關閉時重置表單
$('#jobForm')[0].reset();//$("#jobForm")獲取的是數組,所以需要取出數組的第一項。重置表單