使用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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
js制作简易年历完整实例
Jan 28 Javascript
初识Node.js
Mar 20 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
php中如何执行linux命令详解
2018/11/06 PHP
javascript void(0)的妙用
2009/10/21 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
使用cx_freeze把python打包exe示例
2014/01/24 Python
简单讲解Python中的闭包
2015/08/11 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Django中url的反向查询的方法
2018/03/14 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
python实现计算器简易版
2020/12/17 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
企业项目策划书
2014/01/11 职场文书
会计学专业求职信
2014/07/17 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
2016教师国培研修感言
2015/12/08 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
导游词之西安大清真寺
2019/12/17 职场文书