bootstrap 表单验证使用方法


Posted in Javascript onJanuary 11, 2017

前言:做Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator。今天就来看看它如何使用吧。

一、源码及API地址

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

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

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

二、代码以及效果展示

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的属性值。

 <form>
      <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" />
      </div>
      <div class="form-group">
        <label>Email address</label>
        <input type="text" class="form-control" name="email" />
      </div>
      <div class="form-group">
        <button type="submit" name="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>

有了表单元素之后,就是我们的js初始化了。

$(function () {
    $('form').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: '用户名不能为空'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱地址不能为空'
            }
          }
        }
      }
    });
  });

内容应该很容易看懂。来看效果:

验证通不过,提交按钮灰掉不能点击

bootstrap 表单验证使用方法

验证通过,提交按钮恢复

bootstrap 表单验证使用方法

看看效果先感受下,最大优点:使用简单,界面友好。下面我们来看看重叠验证。

2、中级用法

上面我们知道了非空验证的写法,除此之外肯定还有其他验证方式啊。别急,我们慢慢来看。上面的代码cshtml部分不动,js部分我们稍作修改:

$(function () {
    $('form').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: {
              min: 6,
              max: 18,
              message: '用户名长度必须在6到18位之间'
            },
            regexp: {
              regexp: /^[a-zA-Z0-9_]+$/,
              message: '用户名只能包含大写、小写、数字和下划线'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱不能为空'
            },
            emailAddress: {
              message: '邮箱地址格式有误'
            }
          }
        }
      }
    });
  });

加上了重叠验证我们来看效果:

bootstrap 表单验证使用方法

bootstrap 表单验证使用方法

bootstrap 表单验证使用方法

由上面的代码可以看出在validators属性对应一个Json对象,里面可以包含多个验证的类型:

notEmpty:非空验证;

stringLength:字符串长度验证;

regexp:正则表达式验证;

emailAddress:邮箱地址验证(都不用我们去写邮箱的正则了~~)

除此之外,在文档里面我们看到它总共有46个验证类型,我们抽几个常见的出来看看:

base64:64位编码验证;

between:验证输入值必须在某一个范围值以内,比如大于10小于100;

creditCard:身份证验证;

date:日期验证;

ip:IP地址验证;

numeric:数值验证;

phone:电话号码验证;

uri:url验证;

更多验证类型详见:http://bv.doc.javake.cn/validators/。当然涉及中文的验证可能会有些小问题,园友们如果有需要可以自行下去用代码测试下。

还有一个比较常用的就是submitHandler属性,它对应着提交按钮的事件方法。使用如下:

$(function () {
    $('form').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: {
              min: 6,
              max: 18,
              message: '用户名长度必须在6到18位之间'
            },
            regexp: {
              regexp: /^[a-zA-Z0-9_]+$/,
              message: '用户名只能包含大写、小写、数字和下划线'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱不能为空'
            },
            emailAddress: {
              message: '邮箱地址格式有误'
            }
          }
        }
      },
      submitHandler: function (validator, form, submitButton) {
        alert("submit");
      }
    });
  });

在它的Demo里面介绍了很多验证的实例。我们简单看看它的效果,至于实现代码,其实很简单,有兴趣的可以直接看api。

颜色验证

bootstrap 表单验证使用方法

Tab页表单验证

bootstrap 表单验证使用方法

按钮验证

bootstrap 表单验证使用方法

以上所述是小编给大家介绍的bootstrap 表单验证使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
原生js实现无缝轮播图效果
Jan 11 #Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 #Javascript
原生js实现放大镜效果
Jan 11 #Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 #Javascript
微信小程序开发经验总结(推荐)
Jan 11 #Javascript
bootstrap手风琴制作方法详解
Jan 11 #Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 #Javascript
You might like
PHP调用三种数据库的方法(1)
2006/10/09 PHP
php 分页类 扩展代码
2009/06/11 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
学习Node.js模块机制
2016/10/17 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
英语文学专业学生的自我评价
2013/10/31 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
社区助残日活动总结
2014/08/29 职场文书
党建工作汇报材料
2014/12/24 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers