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

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

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

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

下面来说说他的用法

  1. 下载BootStrapValidator

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

  2. 下载后的目录结构

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

    QQ图片20160927104145.png

 

 

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

3.    用法

没什么说的,直接上代码

(1)库引用

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

 

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

(2)HTML部分

  1. <div class="row">
  2. <form action="dologin" method="post" id="loginform">
  3.  <div class="form-group">
  4.   <div class="input-group input-group-md">
  5.      <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
  6.      <input type="text" class="form-control" name="username" placeholder="用户名"  />
  7.   </div>
  8.  </div>
  9.  <div class="form-group">
  10.   <div class="input-group input-group-md">
  11.      <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
  12.      <input type="password" class="form-control" name="pwd" placeholder="密码"  />
  13.   </div>
  14.  </div>
  15.  <div class="well well-sm" style="text-align:center;">
  16.   
  17.      <input type="radio" name="kind" value="tea"> 老师
  18.      <input type="radio" name="kind" value="stu"> 学生
  19.  </div>
  20.  <button type="submit" class="btn btn-success btn-block">
  21.                                                 登录
  22.     </button>
  23.  </form> 
  24.  </div>

(3)Jquery验证部分代码

  1. $(document).ready(function(){
  2.    // 在这里写你的代码...
  3.  $('#loginform').bootstrapValidator({
  4.   message:"您的输入值不合法",  FeedbackIcons:{
  5.    valid: 'glyphicon glyphicon-ok',            invalid: 'glyphicon glyphicon-remove',            validating: 'glyphicon glyphicon-refresh'
  6.   },  fields:{
  7.    username:{
  8.     validators:{
  9.      notEmpty:{
  10.       message:'用户名不能为空'
  11.      }
  12.     }
  13.    },   pwd:{
  14.     validators:{
  15.      notEmpty:{
  16.       message:'请输入密码'
  17.      }
  18.     }
  19.    }
  20.   }, });
  21.  });

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

 

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

猜你在找的Bootstrap相关文章