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 checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
vue安装遇到的5个报错及解决方法
Jun 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读取xml方法介绍
2013/01/12 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
php导出CSV抽象类实例
2014/09/24 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python基础教程之缩进介绍
2014/08/29 Python
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
周年庆典主持词
2014/04/02 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers