bootstrapvalidator使⽤,重置校验
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.ferrer;" 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"));
关闭时重置表单
bootstrap项目$('#jobForm')[0].reset();//$("#jobForm")获取的是数组,所以需要取出数组的第⼀项。重置表单
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论