首页 > 其他分享> 文章详细

关于boostrapvalidator表单验证神器详细配置说明

2020-01-10 15:04:00 阅读：284 来源： 互联网

标签：glyphicon bootstrapValidator form 校验表单神器 boostrapvalidator data

一、源码及API地址

介绍它之前，还是给出它的源码以及API的地址吧。

bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator

boostrapvalidator api：http://bv.doc.javake.cn/api/

boostrapvalidatorjs和boostrapcss下载地址：https://www.bootcdn.cn/bootstrap-validator/

二、代码以及效果展示

1、初级用法

来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js组件

我们知道，既然是表单验证，那么我们在cshtml页面就必须要有一个Form，并且我们知道Form里面取元素都是通过name属性去取值的，所以，表单里面的元素都要有一个name的属性值。这是自动调用boostrapvalidator方法

找到需要做校验的表单初始化校验插件方法

$('#loginForm').bootstrapValidator({
/*根据验证结果显示的各种图标*/
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},

　　trigger: item.trigger, //监听change动作
　　//excluded: [':hidden'],//[':disabled', ':hidden', ':not(:visible)'] //设置隐藏组件可验证

/*去校验表单元素 用户名 密码*/
/*校验状态：未校验 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')
}
}
}
});
});

还可以手动用，比如这样

<div>
  <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>
  <button id="submit"></button>
</div>
<script src="">
  $('#submit').on("click", () => {
    //开启验证功能
    $("loginForm").bootstrapValidator('validate');
    //验证成功
    if ($("form").data('bootstrapValidator').isValid()) {
      //这里写的是验证成功的逻辑
    }
  })
  //复合组件的验证
  //filedName对应name里面值，重新触发验证
  $('loginForm').data('bootstrapValidator').updateStatus(filedName, 'NOT_VALIDATED').validateField(filedName);
</script>

标签：glyphicon,bootstrapValidator,form,校验,表单,神器,boostrapvalidator,data
来源： https://www.cnblogs.com/hongyungo/p/12176073.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

关于boostrapvalidator表单验证神器详细配置说明

一、源码及API地址

二、代码以及效果展示

1、初级用法