BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图,看看完成后的结果:
怎么样,还比较和谐把,当然你也可以修改默认样式,让它的显示方式更加美观。
下面来说说他的用法:
1.下载BootStrapValidator
你可以点击BootStrapValidator官方下载地址来下载它。
2.下载后的目录结构
下载完成后,如果是全部文件的化,目录结构如下:
其中可以直接在项目中使用的文件都放在dist文件夹中,使用的实例放在demo中,它所依赖的BootStrap以及Jquery文件都放在Vendor文件夹中。如果您项目的BootStrap版本和它所使用的版本不一致,建议使用它的BootStrap文件,否则可能会导致显示效果出问题(困扰了我好几天,终于解决了),下面看看怎么用:
3.用法
没什么说的,直接上代码:
(1)库引用
<link rel="stylesheet" href="../public/static/vendor/bootstrap/css/bootstrap.min.css"/> <script src="/UploadFiles/2021-04-02/jquery.min.js">主要引用了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个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]