使用BootStrapValidator完成前端输入验证

使用BootStrapValidator完成前端输入验证

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

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

下面来说说他的用法：

1.下载BootStrapValidator

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

2.下载后的目录结构

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

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

3.用法

没什么说的，直接上代码：

(1)库引用

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

(2)HTML部分

老师

学生

登录

(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:'请输入密码'

}

}

}

},

});

});

好了，到这里就写完了，当然这里只是一些基本用法，它还有其他更强大的功能，比如异步验证（和服务器端通信验证），网上教程很多，这里就不再赘述。希望本文对您有所帮oQqIZsvvRW助！

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。