实用方法
1.引入
在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件
2. 按照bootstrap的表单组件 构建html代码
在表单中，若对某一字段想添加验证规则，默认需要以<div class=”form-group”></div>包裹（对应错误提示会根据该class值定位），内部<input class="form-control" />标签必须有name属性值，此值为验证匹配字段。
<form id="loginForm">
<div class="form-group">
<label for="username">管理员</label>
<input name="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input name="password" type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<button type="reset" class="btn btn-default">重置</button>
<button type="submit" class="btn btn-primary">登录</button>
</form>
3.找到需要做校验的表单 初始化校验插件方法
$(‘#loginForm‘).bootstrapValidator({ /*根据验证结果显示的各种图标*/ feedbackIcons: { valid: ‘glyphicon glyphicon-ok‘, invalid: ‘glyphicon glyphicon-remove‘, validating: ‘glyphicon glyphicon-refresh‘ }, /*去校验表单元素 用户名 密码*/ /*校验状态：未校验 NOT_VALIDATED 正在校验 VALIDATING 校验成功 VALID 校验失败 INVALID */ /*校验规则：是需要去配置*/ /* fields 字段 ---> 表单内的元素*/ fields:{ /*指定需要校验的元素 通过name数据去指定*/ username:{ /*配置校验规则 规则不止一个*/ validators:{ /*配置具体的规则*/ notEmpty:{ /*校验不成功的提示信息*/ message:‘请您输入用户名‘ }, /*自定义规则*/ callback:{ message:‘用户名错误‘ } } }, password:{ validators:{ notEmpty:{ message:‘请您输入密码‘ }, stringLength:{ min:6, max:18, message:‘密码6-18个字符‘ }, /*自定义规则*/ callback:{ message:‘密码错误‘ } } } } /*当校验失败 默认阻止了提交*/ /*当校验成功 默认就提交了*/ /*阻止默认的提交方式 改用ajax提交方式*/ }).on(‘success.form.bv‘,function (e) { /*阻止浏览器默认行为*/ e.preventDefault(); var $form = $(e.target); /*发登录请求*/ $.ajax({ type:‘post‘, url:‘/employee/employeeLogin‘, /*可传递的数据格式 对象 序列化后的数据 key=value的字符串 [{name:‘‘,value},...] */ data:$form.serialize(), dataType:‘json‘, success:function (data) { /*响应成功后的逻辑*/ if(data.success){ location.href = ‘/admin/index.html‘; }else{ if(data.error == 1000){ /*调用校验插件 让该选项置为 校验失败状态 提示校验失败的信息*/ /*updateStatus(‘哪个元素’，‘修改为什么状态’，‘校验规则’)*/ $form.data(‘bootstrapValidator‘).updateStatus(‘username‘,‘INVALID‘,‘callback‘) }else if(data.error == 1001){ $form.data(‘bootstrapValidator‘).updateStatus(‘password‘,‘INVALID‘,‘callback‘) } } } }); });