jquery插件bootstrapValidator表单验证详解

引导验证程序是为Bootstrap3设计的一款表单验证jQuery插件，非常适合基于引导程序框架的网站。看作者的github，这款插件已经不再更新了，而推荐使用表单验证，不过现在还是先介绍一下BootstrapValidator的使用。

准备工作

BootstrapValidator文档地址：http://bv.doc.javake.cn/

下载源码后，将其中的bootstrapValidator.min.css和bootstatpvvalidator。量滴射流研究…导入项目，并在页面中引入这些组件，如下：

链接rel='样式表'类型=' text/CSS ' href=' path/bootstrapvalidator。量滴' CSS '脚本类型=' text/JAVAScript ' src=' http : path/bootstrapvalidator。量滴js /脚本其中小路是对应文件导入项目的路径

简单应用

文档中给出调用插件的方法是：

$(文档)。ready(function(){ $(表单选择器)).bootstrapValidator({排除：反馈图标：live: "已启用”，消息：此值无效"，Submit buttons 3360 " button[type=" Submit "]"，submitHandler: null，trigger: null，字段s : {字段名称： {已启用： true，消息： "此值无效"，包含： null，selector: null，//将验证程序名称与其对应.验证器名称：验证器选项.} } .} });});下面针对一个简单的表单来进行说明：

form id=' LogFOrm ' class=' form-horizontal ' div class=' form-group ' label class=' col-LG-3 control-label '用户名/label div class='col-lg-5 '输入类型=' text ' class=' form-control ' name=' username '/div/div class=' form-group ' label class=' col-LG-3 control-label '邮箱/label div class='col-lg-5 '输入类型=' text ' class=' form-control ' name=' email '/div/div class=' form-group ' label class=' col-LG-3 control-label '密码/label div class='col-lg-5 '输入类型=' password ' class=' form-control ' name=' password '/div/div按钮类型='submit' class='btn btn-md '提交/按钮/表单对于上面这个表单应用BootstrapValidator非常简单，字段名称对应表单中每一项的名字属性，然后生物价值还内置了很多验证器供用户选择，详细可参考文档的验证器部分，可以看到，邮箱格式的验证正是其中之一，不需要用户自己写正则了。

$(文档)。ready(function(){ $(' # registry-form ')).bootstrapValidator({ field s : { username : { validator 3360 { note mpt : { message : })用户名不能为空}，stringLength: { min: 3，max: 6，message: '用户名只能在3-6个字符之间哦~' }，电子邮件： {验证器： {电子邮件地址： {消息： }邮箱格式有误} }，密码： {验证器： { notempty : { message : }密码不能为空}，stringLength: { min: 6，max: 8，message: '密码必须在6-8个字符之间~' }，正则表达式p : {正则表达式p : /^[a-za-z0-9]$/,message: '密码只能由字母、数字组成~' } } } } });});不符合验证要求时，会显示错误提示的消息，并且禁用提交按钮，提示信息的颜色字体等等都可以重写钢性铸铁来设置，效果展示如下：

注：图中的注册按钮处于禁用状态

下面再介绍一下田地（复数);场；域；字段的选择器，因为表单数据往往是属于某一个注册用户所有，为方便与后台进行数据交互，我们往往按如下的形式设置名字，这时候就不能直接利用名字属性来进行验证了，而是使用选择器来定义字段：

form class=' form-horizontal ' div class=' form-group ' label class=' col-LG-3 control-label '用户名/label div class='col-lg-5 '输入类型=' text ' id=' user ' class=' form-control ' name=' log in _ user。username '/div/div class=' form-group ' label class=' col-LG-3 control-label '密码/label div class='col-lg-5 '输入类型=' password ' id=' pass ' class=' form-control ' name=' log in _ user。密码'/div/div按钮类型=' submit ' id=' submit BTN ' class=' BTN BTN-MD '提交/按钮/表单对应的射流研究…代码：

$(文档)。ready(function(){ $(' # registration-form '))。bootstrapValidator({ field s : { User : { selector : ' # User }，validator : { Not Empty : { Message : '用户名不能为空' })，StringLength 3360 {Min : 3，Max 3360 6，Message : '用户名只能在3-6个字符之间~'}}}，Pass : { selector : ' # pass ' '});如果不喜欢这样写代码的冗余，可以直接应用对应的HTML属性。有关详细信息，请参考文档的设置部分

如果想深入学习表单验证，可以点击主题：jquery表单验证大全JavaScript表单验证大全

如果你还想深入学习，可以点击这里学习，然后附上3个精彩话题给大家：

引导学习教程

引导实用教程

引导表教程

引导插件教程

以上只是BootstrapValidator的一个非常简单的应用。官方文件非常详细。如果您感兴趣，请继续咨询它，了解更多关于其强大功能的信息