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小游戏之象棋暗棋源码详解
Sep 25 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
js定时器实例分享
Dec 20 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 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循环获取GET和POST值的代码
2008/04/09 PHP
PHP 加密解密内部算法
2010/04/22 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
setTimeout学习小结
2017/02/08 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
python解析json实例方法
2013/11/19 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
一份教室追逐打闹的检讨书
2014/09/27 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js