使用BootStrapValidator来完成前端输入验证

编程之家收集整理的这篇文章主要介绍了使用BootStrapValidator来完成前端输入验证编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图,看看完成后的结果:

怎么样,还比较和谐把,当然你也可以修改默认样式,让它的显示方式更加美观。

下面来说说他的用法

  1. 下载BootStrapValidator

    你可以点击BootStrapValidator官方下载地址来下载它。

  2. 下载后的目录结构

    下载完成后,如果是全部文件的化,目录结构如下:

    QQ图片20160927104145.png

 

 

其中可以直接在项目中使用的文件都放在dist文件夹中,使用的实例放在demo中,它所依赖的BootStrap以及Jquery文件都放在Vendor文件夹中。如果您项目的BootStrap版本和它所使用的版本不一致,建议使用它的BootStrap文件,否则可能会导致显示效果出问题(困扰了我好几天,终于解决了),下面看看怎么用:

3.    用法

没什么说的,直接上代码

(1)库引用

<link rel="stylesheet" href="../public/static/vendor/bootstrap/css/bootstrap.min.css"/>
<script src="../public/static/js/jquery.min.js"></script>
<script src="../public/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../public/static/vendor/bootstrapvalidator/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="../public/static/vendor/bootstrapvalidator/js/bootstrapValidator.min.js"></script>

 

主要引用了BootStrap的js和css文件,以及BootStrapValidator的js和CSS文件。以上是根据我的项目结构来引用的,当然您可以按照自己的想法来建立目录。

(2)HTML部分

<div class="row">
<form action="dologin" method="post" id="loginform">
 <div class="form-group">
  <div class="input-group input-group-md">
     <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
     <input type="text" class="form-control" name="username" placeholder="用户名"  />
  </div>
 </div>
 <div class="form-group">
  <div class="input-group input-group-md">
     <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
     <input type="password" class="form-control" name="pwd" placeholder="密码"  />
  </div>
 </div>
 <div class="well well-sm" style="text-align:center;">
  
     <input type="radio" name="kind" value="tea"> 老师
     <input type="radio" name="kind" value="stu"> 学生
 </div>
 <button type="submit" class="btn btn-success btn-block">
                                                登录
    </button>
 </form> 
 </div>

(3)Jquery验证部分代码

$(document).ready(function(){
   // 在这里写你的代码...
 $('#loginform').bootstrapValidator({
  message:"您的输入值不合法",  FeedbackIcons:{
   valid: 'glyphicon glyphicon-ok',            invalid: 'glyphicon glyphicon-remove',            validating: 'glyphicon glyphicon-refresh'
  },  fields:{
   username:{
    validators:{
     notEmpty:{
      message:'用户名不能为空'
     }
    }
   },   pwd:{
    validators:{
     notEmpty:{
      message:'请输入密码'
     }
    }
   }
  }, });
 });

好了,到这里就写完了,当然这里只是一些基本用法,它还有其他更强大的功能,比如异步验证(和服务器端通信验证),网上教程很多,这里就不再赘述。希望本文对您有所帮助!

 

顶求网 首发,转载请注明出处!

总结

以上是编程之家为你收集整理的使用BootStrapValidator来完成前端输入验证全部内容,希望文章能够帮你解决使用BootStrapValidator来完成前端输入验证所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章

猜你在找的Bootstrap相关文章

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图,看看完成后的结果:
顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所以,在首页中主要分三个板块——文章、图书、用户。另外,网站的头部和尾部还要有导航(navigato
在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了我许久,最后通过分析bootcss的源码我发现该网站在所有使用affix的元素的class中都添加了'h
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题。另外,Bootstrap中的tabs必
先看看劳动成果 布局 左右各一半(col-md-6) 左侧登录框占左侧一半的10/12 右侧是登录系统的注意事项 使用到的BootStrap元素 well 输入框组(input-group) 按钮(b
先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个“前5页”和“后5页”显得有点多余,因为点击当前显示第一页
在做WEB开发的时候我们经常会遇到分页的处理,如果在PC上显示网页的话,使用传统的分页是可以接受的。那么,当我们为手机或其他移动端设计界面的话,使用分页未免有些笨拙和难以使用,这时候我们可以使用在单页
为了和文章分类部分的样式进行区分,我决定自己动手写一个具有其他样式的分类标签集。刚好看到豆瓣读书板块的首页中的图书分类标签还不错,于是决定自己写一个类似的样式。首先是HTML代码部分: 可以看到图书分
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注