使用BootStrapValidator来完成前端输入验证
BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图,看看完成后的结果:
怎么样,还比较和谐把,当然你也可以修改默认样式,让它的显示方式更加美观。
下面来说说他的用法:
下载BootStrapValidator
你可以点击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:'请输入密码'}}}},});});
好了,到这里就写完了,当然这里只是一些基本用法,它还有其他更强大的功能,比如异步验证(和服务器端通信验证),网上教程很多,这里就不再赘述。希望本文对您有所帮助!
顶求网 首发,转载请注明出处!
转载于:https://www.cnblogs.com/nerd/p/5915097.html
使用BootStrapValidator来完成前端输入验证相关推荐
- vue 前端 邮箱、密码、手机号码等输入验证规则
最近在写前端表单验证的时候,发现一篇文章质量很好,所以写下这篇文章记录 原文章链接:vue 邮箱.密码.手机号码等输入验证规则 1.手机号 const checkPhone = (rule, valu ...
- WebApiClient的接口输入验证
1. 文章目的 随着WebApiClient的不断完善,越来越多开发者选择WebApiClient替换原生的HttpClient,本文将介绍WebApiClient的接口参数输入有效性验证的新特性. ...
- 【文件上传绕过】——前端检测_前端js验证漏洞
文章目录 一.实验目的: 二.工具: 三.实验环境: 四.实验目的: 五.漏洞说明: 1. 漏洞原理: 2. `js前端验证`过程代码: 六.实验过程: 1. 判断是否存在前端`js绕过漏洞`: 1. ...
- jquery中输入验证中一个不错的效果
在表单的输入验证中,经常要当用户没能正确输入后,要提示"XXXX输入错误" 这一类的信息,如何能搞到动态一点呢,今天发现jquery中的一个不错的效果,笔记之. 1 包含jquer ...
- Struts2用户输入验证(6)
10.6 小结 Struts2框架下的用户输入验证分为三种方式:1. 编程方式下的验证 2. 配置方式下的验证 3.注解方式下的验证. 如果在Struts2项目下存在多种验证方式,其 ...
- C# 文本输入限制类型,datagridview单元格输入验证
1.只能输入double类型 private void textBoxX6_KeyPress(object sender, KeyPressEventArgs e){{//数字0~9所对应的keych ...
- Stormpath发布了简化移动和前端身份验证的客户端API
身份验证.授权.社交登录,以及其他用户管理相关API服务供应商Stormpath,近日发布了一套意在简化移动和前端身份验证与注册过程的全新客户端API. \\ 这一全新API完善了Stormpath侧 ...
- 3.Struts2的输入验证
l 当类型转换成功以后,struts2将进行输入验证 若要进行输入验证则你的action必须继承ActionSupport类,实现其validate方法 在方法中调用addFiled ...
- C++为什么空格无法输出_C 语言 第8章-字符输入/输出和输入验证
1. 缓存区 #include 大部分系统在用户按下 Enter 键之前不会重复打印刚输入的字符,这种输入叫缓冲输入.用户输入的字符被收集并存储在缓冲区(buffer). 把若干字符作为一个块进行传输 ...
最新文章
- 20145129 课程总结
- 如何在Python中反转列表?
- Hibernate【XXXX.hbm.xml】总结
- 动态创建的 CEdit 被限制长度,增加 ES_AUTOHSCROLL 属性;被无法Tab激活焦点,增加 WS_TABSTOP 属性(转)...
- Python学习笔记 ---第三章
- java 和 Android Base64加密,java开发面试笔试题
- 【ElasticSearch】如何使用 ElasticSearch 搜索单词的一部分 模糊搜索 正则匹配 前缀匹配
- android.support.v7.app.AlertDialog.Builder使用说明
- 可视化Python编译软件:GUI2Exe
- 系统引导管理 之 以WinGrub 引导安装Fedora 4.0 为例,详述用WinGrub来引导Linux的安装...
- 无熟人难办事?- 闲聊设计模式-迪米特法则
- 共享汽车违章难处理 车企用定位模块来解决
- sql 根据日期模糊查询SQL Server dateTime类型 模糊查询
- (3)Mathpix Snipping Tool——公式截图获取工具(转为LaTex、MarkDown格式)
- python父亲节快乐_打算送亲戚家孩子新年礼物,有哪些礼物孩子喜欢且有意义?...
- iphone 升级空间不够
- MySQL、Redis、MongoDB安装
- php 随机获取字母,深入PHP获取随机数字和字母的方法详解
- MYSQL之慢SQL
- 补第十五周leetcode算法博客
热门文章
- GDCM:gdcm::ASN1的测试程序
- boost::contract模块实现customer and manager的测试程序
- ITK:创建另一个图像实例
- DCMTK:TLS测试DcmSCP和DcmSCPPool类
- DCMTK:修改DICOM文件的类
- VTK:Points之MaskPointsFilter
- VTK:图片之ImageDifference
- OpenCV极变换polar transforms的实例(附完整代码)
- Qt发布到Google Play
- C语言二进制转换为十六进制(附完整源码)