Bootstrap中使用BootstrapValidator进行自定义表单校验

项目使用：
vue.js + juery+bootstrap

• BootstrapValidator插件需要jQuery和Bootstrap 3
• 引入js和css文件

<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrapValidator.min.css">
<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${request.contextPath}/statics/libs/bootstrapValidator.min.js"></script>

文件下载地址：

	网盘：https://pan.baidu.com/s/1XSajsBuhxYGtUok1nEH2dw
	提取码：ljqx

对于BootstrapValidator的使用有两种方式：

第一种：直接在form表单中添加，直接判断不为空：

• 如果想对某一个字段添加验证规则，需要

  包裹，input标签必须有name值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构

<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Email" 
    data-bv-notempty="true" 
    data-bv-notempty-message="不能为空">
  </div>

初始化bootstrapValidator，submitHandler 属性后面会介绍到

$('#AppForm').bootstrapValidator({
      submitHandler: function (validator, form, submitButton) {
         // validator: 表单验证实例对象
         // form  jq对象  指定表单对象
         // submitButton  jq对象  指定提交按钮的对象
         var tourl="{:U('Admin/User/userSet')}";
         var data=$('#AppForm').serialize();
         var id = $('input[name=id]').val();
         // 使用ajax发送表达数据
         $.App.ajax('post',tourl,data,null);
         return false;
      }
})

使用data-bv-notempty 和 data-bv-notempty-message属性就可以简单进行非空验证。data-bv-notempty 有值就进行非空验证，data-bv-notempty-message 中的值为提示消息

第二种：在js中实现

• 简述 bootstrapValidator 使用方法。想查看更多可以访问查看文档

个人在项目中使用第二种方法，并结合vue十分方便：
Html页面：

<form class="form-horizontal" id="userForm">
			<fieldset style="width: 1000px">
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >姓名</label>
					<div class="col-sm-8">
						<input type="text" name="username" class="form-control" v-model="user.name"
							   placeholder="姓名"/>
					</div>
				</div>
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >工号</label>
					<div class="col-sm-8">
						<input type="text" name="jobAccount" class="form-control" v-model="user.jobAccount" placeholder="工号"/>
					</div>
				</div>
			</fieldset>

			<fieldset style="width: 1000px">
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >民族</label>
					<div class="col-sm-8">
						<select v-model="user.nation" name="nation" class="form-control">
							<option value="">-请选择-</option>
							<option v-for="item in nationList" v-bind :value="item.id" v-text="item.name"
							></option>
						</select>
					</div>
				</div>
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >性别</label>
					<div class="col-sm-8">
						<select  name="sex"  v-model="user.sex" class="form-control">
							<option value="1">男</option>
							<option value="2">女</option>
						</select>
					</div>
				</div>
			</fieldset>


			<fieldset style="width: 1000px">
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >证件类型</label>
					<div class="col-sm-8">
						<select  name="certificateType" v-model="user.certificateType"
								 class="form-control">
							<option value="1">身份证</option>
							<option value="2">护照</option>
							<option value="3">回乡证</option>
							<option value="4">台胞证</option>
						</select>
					</div>
				</div>
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >证件号码</label>
					<div class="col-sm-8">
						<input type="text"  name="certificateNum" class="form-control"
							   v-model="user.certificateNum" placeholder="证件号码"/>
					</div>
				</div>
			</fieldset>

			<fieldset style="width: 1000px">
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >电子健康卡号</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" v-model="user.healcardNum" placeholder="电子健康卡号"/>
					</div>
				</div>
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >单位电话</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" v-model="user.unitPhone" placeholder="单位电话"/>
					</div>
				</div>
			</fieldset>

			<fieldset style="width: 1000px">
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >手机号</label>
					<div class="col-sm-8">
						<input type="text" name="mobilePhone" class="form-control"
							   v-model="user.mobilePhone" placeholder="手机号"/>
					</div>
				</div>
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >邮箱</label>
					<div class="col-sm-8">
						<input type="text" name="email" class="form-control" v-model="user.email"
							   placeholder="邮箱"/>
					</div>
				</div>
			</fieldset>

			<fieldset style="width: 1000px">
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >备注</label>
					<div class="col-sm-8">
						<textarea id="remark"  rows="4" cols="120" v-model="user.remark"
								  placeholder="备注"	class="form-control"  maxlength="200"></textarea>
					</div>
				</div>
				<div class="form-group col-sm-6">
					<label class="col-sm-3 control-label" >所属单位</label>
					<div class="col-sm-6">
						<textarea id="orgNames" name="orgNames" rows="4" cols="120" v-model="user.orgNames"
								  @click="deptTree" readonly="readonly"  placeholder="所属单位"	class="form-control"  maxlength="200"></textarea>
					</div>
					<div class="col-sm-1 control-label" style="margin-left: -40px;">
						<input type="button" class="btn btn-" style="margin-top: -7px;margin-left: -15px;"
							   @click="clearSelected"
							   value="重置"/>
					</div>
				</div>

			</fieldset>
			
			<div class="form-group-user">
				<div class="form-group clearfix col-md-6">
					<strong class="col-sm-5 control-label">数据权限</strong>
					<div class="col-sm-10">
						<ul id="dataTree" class="ztree"></ul>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">角色</div>
				<div class="col-sm-10 roleClass">
					<label v-for="(role,index)  in roleList" class="checkbox-inline">
						<input type="checkbox" :value="role.id" v-model="user.roleIdList"
							   name="roleIdList">{{role.roleName}}
					</label>
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-2 control-label"></div>
				<input type="button" class="oy-btn oy-btn-sm" @click="saveOrUpdate" value="确定"/>
				&nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
			</div>
		</form>

在html页面只需要将我们要校验的字段添加 name属性，并使用class=“form-control” 纳入bootstrap控制内即可；
对应js：

//form验证规则
function formValidator(){
    //表单校验
    $('#userForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: '用户名验证失败',
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    stringLength: {
                        max: 20,
                        message: '用户名长度超过20位'
                    }
                }
            },
            jobAccount: {
                message: '工号验证失败',
                validators: {
                    notEmpty: {
                        message: '工号不能为空'
                    },
                    stringLength: {
                        max: 50,
                        message: '工号长度超过50位'
                    }
                }
            },
            nation: {
                message: '民族验证失败',
                validators: {
                    notEmpty: {
                        message: '民族不能为空'
                    }
                }
            },
            sex: {
                message: '性别验证失败',
                validators: {
                    notEmpty: {
                        message: '性别不能为空'
                    }
                }
            },
            certificateType: {
                message: '证件类型验证失败',
                validators: {
                    notEmpty: {
                        message: '证件类型不能为空'
                    }
                }
            },
            certificateNum: {
                message: '证件号码验证失败',
                validators: {
                    notEmpty: {
                        message: '证件号码不能为空'
                    }
                }
            },
            mobilePhone: {
                message: '手机号验证失败',
                validators: {
                    notEmpty: {
                        message: '手机号不能为空'
                    },
                    regexp: {
                        regexp:  /^1[34578]\d{9}$/,
                        message: '手机号格式有误'
                    }
                }
            },
            email: {
                message: '邮箱验证失败',
                validators: {
                    notEmpty: {
                        message: '邮箱不能为空'
                    },
                    emailAddress: {
                        message: '邮箱地址格式有误'
                    }
                }
            },
            orgNames:{
                message: '所属机构验证失败',
                validators: {
                    notEmpty: {
                        message: '所属机构不能为空'
                    }
                }

            }



        }
    });
}

上面代码中 emailAddress 是邮箱地址验证，都不用我们去写邮箱的正则了。除此之外还有46个其他的验证类型，大家自己去看文档。再贴几个常见的。当然它支持正则表达式，所以可以任意搭配；

• between: 验证输入值必须在某一个范围值内，比如大于1小于10
• creditCard: 身份证验证
• date: 日期验证
• ip: IP地址验证
• numeric: 数值验证
• phone: 电话号码验证
• url验证

对于项目中在使用这个js函数的地方：

   //用户管理-进入新增
        add: function(){
            $("#userForm").data('bootstrapValidator').destroy();
            $('#userForm').data('bootstrapValidator', null);
            formValidator();
            
            vm.showList = false;
            vm.userOperater=true;
            vm.title = "新增";
            vm.roleList = {};
            vm.user =
                {nation:"",sex:"1",certificateType:"1",orgId:null, roleIdList:[],orgNames:[],orgIds:[],deptList:[]};
        },

效果如下：

参考文章：https://www.jianshu.com/p/756b225d480d