bootstrap表单验证之bootstrapValidator（非submit按钮提交）

看了两年CSDN第一次写博客就从这里开始了，写的不好请不要喷我~
    鉴于之前学习的东西总是忘记，没有记录所以在这里记录一下。

基于bootstrap的表单验证实现。

在页面引入需要使用的CSS和JS，引入你项目中的CSS 和 JS

<%--validate--%>
<link rel="stylesheet" href="<c:url value="/css/bootstrapValidator.css"/>">

<!-- Jquery -->
<script src="<c:url value="/js/plugins/jquery-3.2.1.min.js"/>" type="text/javascript"></script>
<%-- Validate --%>
<script src="<c:url value="/js/plugins/bootstrapValidator.js"/>" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="<c:url value="/pulgins/bootstrap-3.3.7-dist/js/bootstrap.min.js"/>" type="text/javascript"></script>

    2.页面代码，我用的是bootstrap布局。form表单验证要将需要验证的字段放在form中。其中按钮的type类型为button。 <form id="appendant_form" class="form-horizontal" method="post" action="" enctype="multipart/form-data">
<div class="form-group form-group-lg">
<label for="appendant_name" class="col-sm-2 control-label">名称</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="appendant_name" id="appendant_name" placeholder="名称">
</div>
</div>
<div class="form-group form-group-lg">
<label for="appendant_price" class="col-sm-2 control-label">价格</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="appendant_price" id="appendant_price" placeholder="价格/元">
</div>
</div>
</form>

<button type="button" id="addAppendant" class="btn btn-default">确认</button>

3.JS代码如下：
在页面加载时进行初始化验证规则 //初始化表单验证
$(document).ready(function () {
formValidator();
});具体验证规则//form验证规则
function formValidator() {
$("#appendant_form").bootstrapValidator({//根据自己的formid进行更改
message: 'This value is not valid',//默认提示信息
feedbackIcons: {//提示图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
appendant_name: {//名称校验
message: '名称验证失败',
validators: {//验证条件
notEmpty: {
message: '附属品名称不能为空'
},
stringLength: {
min: 1,
max: 30,
message: '附属品名称不能超过30个字'
}
}
},
appendant_price: {
message: '价格验证失败',
validators: {
notEmpty: {
message: '附属品价格不能为空'
},
stringLength: {
min: 1,
max: 5,
message: '价格不能超过5位'
},
regexp: {//自定义校验
regexp: /^[0-9]*$/,//正则表达式
message: '附属品价格只能为数字'
}
}
},
},
})
}当页面按钮为普通的button时，需要启用bootstrap验证。代码如下： /*手动验证表单，当是普通按钮时。*/
$('#appendant_form').data('bootstrapValidator').validate();//启用验证
var flag = $('#appendant_form').data('bootstrapValidator').isValid()//验证是否通过true/false

之后验证编写的代码是否可用。



验证成功！
希望对大家有所帮助