学这个博主的：https://www.cnblogs.com/wang-kai-xuan/p/11031733.html
引入标签
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
//--------------------------------下方都是bootstrap的基本依赖-----------------------
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
html
<div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
<form class="form-horizontal" method="post" action="" id="classes-form">
<!--第一个数值验证-->
<div class="box-body">
<div class="form-group">
<label for="inputName1" class="col-sm-2 col-sm-offset-1 control-label">商品价格</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="price" id="inputName1"
placeholder="请输入商品价格">
</div>
</div>
</div>
<!--第二个 数值范围验证-->
<div class="box-body">
<div class="form-group">
<label for="inputName2" class="col-sm-2 col-sm-offset-1 control-label">最大最小值</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="max_num" id="inputName2"
placeholder="请输入10-100之间的值">
</div>
</div>
</div>
</form>
</div>
js验证
<script>
$(function () {
$(\'#classes-form\').bootstrapValidator({
live : \'enabled\', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
// disabled和submitted代表当点击提交按钮时触发验证
feedbackIcons: { //显示表单验证结果的图标
valid: \'glyphicon glyphicon-ok\',
invalid: \'glyphicon glyphicon-remove\',
validating: \'glyphicon glyphicon-refresh\'
},
fields: {
// 第一个验证
price: {
validators: {
numeric: {
message: \'价格必须为数值\'
}
}
},
// 第二个验证
max_num: {
validators: {
lessThan: { //最大值验证
value: 100,
inclusive: false, //是否包含当前值，false不包含，true包含。默认为true
message: \'值不能大于或等于100\'
},
greaterThan: { //最小值验证
value: 10,
inclusive: true,
message: \'值不能小于10\'
}
}
}
}
});
});
</script>
注意点：
-
<div class="form-group"></div>来包裹才可以生效
整体代码，复制即可用