基于BootstrapValidator的数据验证
来源:互联网 发布:重庆大学软件学院 编辑:程序博客网 时间:2024/05/19 20:40
零. 写在前面
做web开发,经常需要使用到表单验证,作者本人一开始也是自己写各种验证,最近接触到BootstrapValidator,觉得非常好用,界面友好,使用方便,与Bootstrap完美兼容,堪称前端数据验证神器。
那么,今天,我们就来了解一下如何使用BootstrapValidator做表单验证吧!
首先,使用BootstrapValidator需要从GitHub的BootstrapValidator项目页下载文件包。
一. 需要引入的文件
样式表(css)文件:
bootstrap.min.css
bootstrapValidator.min.css
js脚本文件:
jquery-1.10.2.min.js
bootstrap.min.js
1.1 在< head >标签中引入css文件
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrapValidator.min.css" rel="stylesheet">
1.2 在< /body >前引入js文件
<script type="text/javascript" src="js/bootstrap.min.js"></script> <script src="js/bootstrapValidator.min.js"></script>
二. 登录验证Demo
2.1使用Bootstrap写出界面
登录界面效果图如下:
登录界面代码如下:
<body><div class="container"> <div class="col-md-12"> <h2> <i class="glyphicon glyphicon-education" ></i> 高校学生信息管理系统<span class="beta"> 统一身份认证<sup> Beta</sup></span></h2> <hr style="height: 1px; border: none; border-top: 1px solid #dedede;"> </div> <div class="col-md-8"> <div id="myCarousel" data-ride="carousel" class="carousel"> <!-- 轮播(Carousel)指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播(Carousel)项目 --> <div class="carousel-inner"> <div class="item active"> <img src="img/1.jpg" alt="First slide"> </div> <div class="item"> <img src="img/2.jpg" alt="Second slide"> </div> <div class="item"> <img src="img/3.jpg" alt="Third slide"> </div> </div> <!-- 轮播(Carousel)导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a> <a class="carousel-control right" href="#myCarousel" data-slide="next"></a> </div> </div> <div class="col-md-4 right"> <div class="well col-md-12"> <h3>用户登录</h3> <form action="<%=basePath%>pages/back/admin_login.action" method="post" id="form"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user" ></i></span> <input type="text" class="form-control" placeholder="用户名" name="email"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock" ></i></span> <input type="password" class="form-control" placeholder="密码" name="password"> </div> </div> <a href="register.html" style="float: left">注册新用户</a> <a href="#" style="text-align: right"> <p>忘记密码?点击找回.</p> </a> <p> <input type="submit" class="btn btn-primary btn-block" value="登录系统"> </p> </form> </div> </div> <footer class="col-md-12"> <hr style="height:1px;border:none;border-top:1px solid #dedede;"> <div class="col-md-6"> <p>Copyright © 2017 济南陌讯信息科技有限公司 All Rights Reserved.</p> </div> <div class="col-md-6"> <div class="footer-i"> <i class="glyphicon glyphicon-globe"></i><a href="http://mosisson.com" target="_black"> 官方网站</a> </div> <div class="footer-i"> <i class="glyphicon glyphicon-envelope"></i><a href="mailto:daixiang@mosisson.com"> 技术支持</a> </div> </div> </footer></div></body>
PS: 作者使用了Botstrap框架来写界面,如果你对Bootstrap框架不是很熟悉,那么你可以阅读作者之前写过的文章【Web前端框架学习—Bootstrap】 来了解Bootstrap。
2.2 使用BootstrapValidator进行数据验证
导入BootstrapValidator的css文件、js文件后,就需要自己写一段jQuery脚本进行数据验证。下面是作者写的一个简单的jQuery数据验证脚本,可参照文档注释阅读。
$(function () { /* 文档加载,执行一个函数*/ $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { /*input状态样式图片*/ valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { /*验证规则*/ email: { //验证email项 validators: { notEmpty: { //非空验证:提示消息 message: '对不起,邮箱地址不能为空!' }, emailAddress: { message: '请输入正确的邮箱地址如:abc@mosisson.com' } } }, password: { //验证password项 message:'密码无效', validators: { notEmpty: { //非空验证:提示消息 message: '密码不能为空' }, stringLength: { min: 6, max: 12, message: '密码长度必须在6到12之间' }, different: { //不能和用户名相同 field: 'email', //需要进行比较的input name值 message: '密码不能和用户名相同' } } }, } });});
加了验证之后,我们来看效果图:
这里作者把用户名设置成使用email替代,输入错误的邮箱地址,数据验证不通过,css控制输入框显示为红色,不可以点击登录按钮。
输入正确的邮箱地址,输入错误的密码后,数据验证不通过,css控制输入框显示为红色,不可以点击登录按钮。
当用户名、密码全部输入正确后,数据验证通过,css控制输入框显示为绿色,可以点击登录按钮。
三. 参考资料
互联网时代,让学习变得更加方便,各种资料触手可得。
1. BootstrapValidator在GitHub的主页
2. 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
3. JS组件系列——Form表单验证神器: BootstrapValidator
- 基于BootstrapValidator的数据验证
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- bootstrapValidator验证的问题
- 基于bootstrap3最好的jquery表单验证插件BootstrapValidator
- bootstrap数据验证插件BootstrapValidator
- bootstrapValidator 的隐藏域验证
- BootstrapValidator的Remote远程验证
- jquery,bootstrap数据验证插件bootstrapValidator
- bootstrapValidator验证
- Bootstrap学习总结笔记(24)-- 基于BootstrapValidator的Form表单验证
- jQuery 实现bootstrapValidator下的全局验证
- 使用bootstrapvalidator的remote验证经验
- 使用bootstrapvalidator的remote验证经验
- BootstrapValidator.js 插件针对表单的验证
- bootstrapValidator 全局验证
- 深入理解JVM内幕
- iOS开发—配置Apache服务器
- 安卓自定义相机录像功能全解(不调用系统相机)
- opencv 查找并绘制轮廓
- 练习5
- 基于BootstrapValidator的数据验证
- 运算符的运用
- [BZOJ] 1303
- FLASK ON IIS
- strcat()函数原代码解析
- Nginx源码剖析之内存池、内存管理
- Python入门(三)
- NOIP2017滚粗记
- Windows7系统禁用驱动程序签名强制的方法