使用BootStrapValidator完成前端输入验证


Posted in Javascript onSeptember 28, 2016

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

使用BootStrapValidator完成前端输入验证

使用BootStrapValidator完成前端输入验证

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

下面来说说他的用法:

1.下载BootStrapValidator

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

2.下载后的目录结构

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

使用BootStrapValidator完成前端输入验证

其中可以直接在项目中使用的文件都放在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:'请输入密码'
 }
 }
 }
 },
 });
 });

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 #Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 #Javascript
详解JavaScript权威指南之对象
Sep 27 #Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 #Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 #Javascript
ReactNative页面跳转实例代码
Sep 27 #Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 #Javascript
You might like
php支付宝在线支付接口开发教程
2016/09/19 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python队列Queue的详解
2019/05/10 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python实现两个文件夹的同步
2019/08/29 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
html5录音功能实战示例
2019/03/25 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
诚信考试倡议书
2014/04/15 职场文书
酒店开业策划方案
2014/06/02 职场文书
拉拉队口号
2014/06/16 职场文书
2014年党员整改措施
2014/10/24 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
MySQL基础(一)
2021/04/05 MySQL
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android