使用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 相关文章推荐
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
总结js函数相关知识点
Feb 27 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
基于mysql的bbs设计(一)
2006/10/09 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
Gird事件机制初级读本
2007/03/10 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
js自定义弹框插件的封装
2020/08/24 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
爱游人:Travelliker
2017/09/05 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
工商企业管理专业自荐信范文
2014/04/12 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL