使用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 相关文章推荐
js计数器代码
Nov 04 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
微信小程序自定义组件
Aug 16 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
详解JavaScript中的this指向问题
Feb 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
Dedecms常用函数解析
2008/02/01 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
PHP7新特性简述
2017/06/11 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
图解javascript作用域链
2019/05/27 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
Python语法分析之字符串格式化
2019/06/13 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
怎样写好创业计划书的内容
2014/02/06 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
工作岗位职责范本
2015/02/15 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP