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

一、源码及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

时间: 2024-10-24 23:01:37

关于boostrapvalidator表单验证神器详细配置说明的相关文章

黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)

前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址 介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do

JS组件系列——Form表单验证神器: BootstrapValidator

前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址 介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do

BootstrapValidator:表单验证神器

前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址 介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do

表单验证神器-validate

最近做表单校验提交的功能特别多,之前都是自己写js,再点击提交的时候,满足验证必填,格式,报错以后的提示,跳转到报错处等等需求,最近同事给推荐了一个插件 用来验证表单,十分好用,在以上功能满足的前提下,还可以对表单进行触发校验,失去焦点校验,也可以自动跳转错误等. 插件名:jquery.validate.js 是一个基于jquery的表单验证工具 官网地址:http://jqueryvalidation.org/     一定要参照官网地址 看,很多东西 其他平台都没有讲清楚,使用的时候绕了很大

表单验证神器——jquery.validate插件

jquery.validate.js插件应用举例,ajax方式提交数据. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

表单验证&amp;lt;AngularJs&amp;gt;

经常使用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,仅仅要在输入字段元素上加入HTML5标记required就可以: <input type="text" required />   2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

AngularJs 表单验证

看到一些博客说这个框架要过时了,但是还是学习了下,觉的很方便的一个框架,有空的同学可以看看,适合我们入门看,比较基础. 对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容. $scope.model = { id : 8, name: "alice", email: "

AngularJs 入门系列-2 表单验证

对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容. $scope.model = { id : 8, name: "alice", email: "[email protected]" }; angularjs 的验证需要表单的配合,为了能够访问表单,我们需

Yii学习笔记之四(表单验证 api 翻译)

1.表单验证 对于用户输入的所有数据,你不能信任,必须加以验证. 所有框架如此,对于yii 可以使用函数 yii\base\Model::validate()  进行验证 他会返回boolean值的 true /false 如果验证未通过,可以使用 yii\base\Model::$errors 属性进行处理,如下代码: <?php //加载表单模型(绝对地址方式) /*如果上面引入 use app\models\ContactForm; 则可以直接使用 $model = new Contact