脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 表单验证

bootstrap 表单验证使用方法

 更新时间：2017年01月11日 16:40:13   作者：辛勤的小园丁_七爷  
在web开发过程中表单验证是比较常见的需求，友好的错误提示能够用户带来极好的用户体验效果，今天小编给大家带来如何使用bootstrap 表单验证功能，一起看看吧

前言：做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: '邮箱地址不能为空'
            }
          }
        }
      }
    });
  });

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

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

验证通过，提交按钮恢复

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

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: '邮箱地址格式有误'
            }
          }
        }
      }
    });
  });

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

由上面的代码可以看出在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。

颜色验证

Tab页表单验证

按钮验证

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

您可能感兴趣的文章:

相关文章

  • 微信小程序ReferenceError:xxx is not defined报错解决办法

    微信小程序ReferenceError:xxx is not defined报错解决办法

    最近在学习微信小程序的开发,在一个练手项目中竟然报错,所以下面这篇文章主要给大家介绍了关于微信小程序ReferenceError:xxx is not defined报错的解决办法,需要的朋友可以参考下
    2023-12-12
  • javascript iframe内的函数调用实现方法

    javascript iframe内的函数调用实现方法

    用下面的方法可以调用iframe中的函数，实现一些比较特殊的效果，不过能跨域的。
    2009-07-07
  • js 取消超链接的方法小结

    js 取消超链接的方法小结

    今天在工作中需要将某个链接给取消实现只触发事件的目的，后来发现批量取消链接等，脚本之家简单的给整理了下，希望对需要的朋友有所帮助。
    2011-10-10
  • div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容

    div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容

    div+css+js模拟tab,这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS
    2009-12-12
  • 过期软件破解办法实例详解

    过期软件破解办法实例详解

    这篇文章主要介绍了过期软件破解办法实例详解的相关资料,5行脚本代码即可改变软件期限，具有参考价值，其他软件可参考此方法，需要的朋友可以参考下
    2017-01-01
  • 通过封装scroll.js 获取滚动条的值

    通过封装scroll.js 获取滚动条的值

    本文通过实例代码给大家介绍了通过封装scroll.js 获取滚动条的值的相关知识，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-07-07
  • JavaScript中的浅拷贝和深拷贝原理与实现浅析

    JavaScript中的浅拷贝和深拷贝原理与实现浅析

    这篇文章主要介绍了JavaScript中的浅拷贝和深拷贝原理与实现，JavaScript 中的浅拷贝和深拷贝指的是在复制对象（包括对象、数组等）时，是否只复制对象的引用地址或者在复制时创建一个新的对象
    2023-04-04
  • js实现延迟加载的几种方法

    js实现延迟加载的几种方法

    本篇文章主要介绍了js实现延迟加载的几种方法，js的延迟加载有助与提高页面的加载速度，主要介绍了3种方法，有兴趣的可以了解一下
    2017-04-04
  • layui实现给某一列加点击事件

    layui实现给某一列加点击事件

    今天小编就为大家分享一篇layui实现给某一列加点击事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • JavaScript中的连续赋值问题实例分析

    JavaScript中的连续赋值问题实例分析

    这篇文章主要介绍了JavaScript中的连续赋值问题,结合实例形式分析了javascript赋值语句以及连续赋值操作相关用法与操作注意事项,需要的朋友可以参考下
    2019-07-07

最新评论