使用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 相关文章推荐
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
node全局变量__dirname与__filename的区别
Jan 14 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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 单引号与双引号的区别
2009/11/24 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
JavaScript多线程的实现方法
2007/05/08 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
python地震数据可视化详解
2019/06/18 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Internet体系结构
2014/12/21 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
效能风暴心得体会
2014/09/04 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
浅谈python数据类型及其操作
2021/05/25 Python