一、源码及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组件
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />
我们知道,既然是表单验证,那么我们在cshtml页面就必须要有一个Form,并且我们知道Form里面取元素都是通过name属性去取值的,所以,表单里面的元素都要有一个name的属性值。这是自动调用boostrapvalidator方法
<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>
找到需要做校验的表单 初始化校验插件方法
$(‘#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>
原文地址:https://www.cnblogs.com/hongyungo/p/12176073.html