本文主要为大家详细介绍了jquery开源组件bootstrapvalidator的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
参考博客：js组件系列——form表单验证神器： bootstrapvalidator
参考博客：bootstrapvalidator之api学习
表单html，如下：
<form role="form" id="roleform">
<p class="box-body">
<p class="form-group">
<input type="text" class="form-control" id="inputrolename"
name="rolename" placeholder="角色名称" />
</p>
<p class="form-group">
<input type="text" class="form-control" id="inputroledescribe"
name="roledescribe" placeholder="角色描述" />
</p>
<p class="form-group">
<select class="form-control select2" style="width: 100%;"
id="selectroletype">
</select>
</p>
<p class="form-group">
<select class="form-control select2" style="width: 100%;"
id="selectuseflag">
<option selected="selected" value='y'>可用</option>
<option value='n'>不可用</option>
</select>
</p>
<p class="form-group">
<input type="text" class="form-control" id="inputdisplaysn"
name="displaysn" placeholder="显示序号" />
</p>
</p>
</form>
js代码如下：
function initform(){
$('#roleform').bootstrapvalidator({
fields : {
rolename : {
validators : {
notempty : {
message : '角色名称不能为空'
},
stringlength : {
min : 1,
max : 16,
message : '角色名称长度必须在1到16位之间'
},
regexp : {
regexp : /^[^&@#/"']*$/,
message : '角色名称不能包含&@#/\"\'等字符'
}
}
},
roledescribe : {
validators : {
notempty : {
message : '角色描述不能为空'
},
stringlength : {
min : 1,
max : 64,
message : '角色描述长度必须在1到64位之间'
},
regexp : {
regexp : /^[^&@#/"']*$/,
message : '角色名称不能包含&@#/\"\'等字符'
}
}
}
}
});
}
保存前验证代码如下：
function save_click() {
$('#roleform').bootstrapvalidator('validate');
var valid = $('#roleform').data('bootstrapvalidator').isvalid();
if(!valid){return;}
相关推荐：
实例详解jquery validator验证ajax提交表单的方法和ajax传参的方法
详解vue和vue-validator实现表单验证功能
bootstrapvalidator校验方式
以上就是jquery开源组件bootstrapvalidator详解的详细内容。