微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用BootStrapValidator完成前端输入验证

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图,看看完成后的结果:

怎么样,还比较和谐把,当然你也可以修改认样式,让它的显示方式更加美观。

下面来说说他的用法

1.下载BootStrapValidator

你可以点击BootStrapValidator官方下载地址来下载它。

2.下载后的目录结构

下载完成后,如果是全部文件的化,目录结构如下:

其中可以直接在项目中使用的文件都放在dist文件夹中,使用的实例放在demo中,它所依赖的BootStrap以及Jquery文件都放在vendor文件夹中。如果您项目的BootStrap版本和它所使用的版本不一致,建议使用它的BootStrap文件,否则可能会导致显示效果出问题(困扰了我好几天,终于解决了),下面看看怎么用:

3.用法

没什么说的,直接上代码

(1)库引用

rush:xhtml;"> vendor/bootstrap/css/bootstrap.min.css"/> vendor/bootstrapvalidator/css/bootstrapValidator.min.css"/>

主要引用了BootStrap的js和css文件,以及BootStrapValidator的js和CSS文件。以上是根据我的项目结构来引用的,当然您可以按照自己的想法来建立目录。

(2)HTML部分

rush:xhtml;">
<input type="radio" name="kind" value="tea"> 老师
<input type="radio" name="kind" value="stu"> 学生

(3)Jquery验证部分代码

rush:js;"> $(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个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐