jquery插件bootstrapValidator数据验证详解

时间：2021-09-12 来源：互联网编辑：宝哥软件园浏览：次

因为项目需要数据验证，看bootstrapValidator还不错，就上手一直，完美兼容，话不多说。

引导：能够增加兼容性的强大框架。

需要引用css:

bootstrap.min.css

bootstrapValidator.min.css

js:

jquery-1.10.2.min.js

bootstrap.min.js

bootstrapValidator.min.js

（下载实例)

以上这些都是必须的。

先上个简单的例子，只要导入相应的文件可以直接运行：

！DOCTYPE html html标题使用埃阿斯提交数据/title link rel='样式表href='./厂商/引导/CSS/引导。CSS '/link rel='样式表href='./dist/CSS/bootstrapvalidator。' CSS/'脚本类型=' text/JavaScript ' src=' http :/vender/jquery/jquery-1。10 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http :/厂商/引导程序/js/引导程序。量滴js '/script脚本类型=' text/JavaScript ' src=' http :/dist/js/bootstrapvalidator。js '/script/head dydiv class=' container '！-上课都是引导程序定义好的样式，验证是根据投入中的名字值-表单id='defaultForm '方法='post '类='形式-水平'操作='ajaxSubmit.php '！-下面这个差异必须要有，插件根据这个进行添加提示-div class=' form-group ' label class=' col-LG-3 control-label ' username/label div class=' col-LG-5 '输入类型=' text ' class=' form-control ' name=' username '/div/div class=' form-group ' label class=' col-LG-3 control-label ' email address/label div class=' col-LG-5 '输入类型=' text ' class=' form-control ' name=' email '/div/div/class=' form-group ' ready(function(){/* * *下面是进行插件初始化* 你只需传入相应的键值对* */$('#defaultForm ').bootstrapValidator({ message : '此值无效，反馈图标： {/*输入框不同状态，显示图片的样式*/正在验证：“glyphicon glyphicon-ok”，无效：“glyphicon glyphicon-remove”，正在验证：“glyphicon glyphicon-refresh”}，字段： {/*验证*/username: {/*键名用户名和输入名称值对应*/message: "用户名无效”，验证器： { notempty : {/*非空提示*/message: '用户名不能为空}，stringLength: {/*长度提示*/min: 6，max: 30，message: '用户名长度必须在6到30之间' }/*最后一个没有逗号*/} }，password: { message: '密码无效，验证程序： { notempty : { message : }密码不能为空}，stringLength: { min: 6，max: 30，message: '用户名长度必须在6到30之间} }，电子邮件： {验证器： { notempty : { message : '电子邮件地址是必需的，不能为空}，emailAddress: { message: '输入的电子邮件地址无效' } } } } } });});/脚本/正文/html这是最基本的，例子直接复制到本地，并且导入需要的钢性铸铁和射流研究…文件(JS中用户名、密码等键值名和投入标签中名字属性值对应),运行就能够进行非空，长度验证，完全不需要管钢性铸铁样式。

效果图如下：

当然，以上都是插件写好的规则，如果想自己加匹配规则怎么办呢？

如下只要在投入相对应的键值中加入一个regexp:{}键值对（在上面的射流研究…基础上修改)

username: {/*键名和输入名称值对应*/message: "用户名无效”，验证器： { notempty : {/*非空提示*/message: '用户名不能为空}，regexp: {/*只需加此键值对，包含正则表达式，和提示*/regexp: /^[a-zA-Z0-9_\.] $/,消息： '只能是数字和字母_.}，stringLength: {/*长度提示*/min: 6，max: 30，message: '用户名长度必须在6到30之间' }/*最后一个没有逗号*/} },效果如下：

至此只要运行和看了例子，就能进行大部分的验证了，是不是很简单？只要写相应的键值对即可，再也自己什么都写了。下面进一步的使用，进行用户的注册，

需求：

实时验证用户名是否存在，密码不能和用户名相同，两次密码需要相同，提交之后需要验证返回值

超文本标记语言代码（直接替换上例子中的形式即可):

表单id='defaultForm '角色='form '类=“表单登录”操作=' registerAccount.do '方法='post' h2类='表单-登录-标题'请输入注册信息：/h2 div class='form-group '标签为='用户名'用户名：/labelinput class=' form-control ' type=' text ' name=' username ' id=' username '/div div class=' form-group '标签为='密码'密码：/label input class=' form-control ' type=' password ' name=' password ' id=' password '/div class=' form-group ' label for=' repassword '确认密码：/labelinput class=' form-control ' type=' password name=' repas word ' id=' repas word '/div/div class=' form-group '标签为='电话'手机号码：/label input class=' form-control ' type=' text ' name=' phone ' id=' phone '/div class=' form-group '标签为=' email ' email :/label input class=' form-control ' type=' email ' name=' email ' id=' email '/div class=' form-group '标签为=“邀请”邀请码：/labelinput类=' form-control type=' text ' name=' invite ' id=' invite '/div class=' form-group ' button class=' BTN BTN-LG BTN-主BTN-block ' type=' submit '确认注册/button a=' BTN BTN-LG BTN-主BTN-block“href=” ./'返回首页/a /div /formjs代码（直接替换例子中的JS):

$(function(){/*文档加载，执行一个函数*/$('#defaultForm ').bootstrapValidator({ message : '此值无效，反馈图标： {/*输入状态样式图片*/正在验证：“glyphicon glyphicon-ok”，无效：“glyphicon glyphicon-remove”，正在验证：“glyphicon glyphicon-refresh”}，字段： {/*验证：规则*/username: {//验证投入项：验证规则消息："用户名无效”，验证器： { notempty : {//非空验证：提示消息消息： '用户名不能为空}，stringLength: { min: 6，max: 30，message: '用户名长度必须在6到30之间},阈值： 6,//有6字符以上才发送创建交互式、快速动态网页应用的网页开发技术请求，(输入中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始)remote: {//ajax验证服务器结果：{ '有效，真或假}向服务发送当前输入名称值，获得一个json数据。

例表示正确：{ '有效，true} url: 'exist2.do '，//验证地址消息： '用户已存在',//提示消息延迟： 2000,//每输入一个字符，就发创建交互式、快速动态网页应用的网页开发技术请求，服务器压力还是太大，设置2秒发送一次ajax(默认输入一个字符，提交一次，服务器压力太大)类型：“开机自检”//请求方式/**自定义提交数据，默认值提交当前输入值*数据：函数（验证程序){返回{ password : $('[name=' passwordnameattributein your form ']').val()，无论： $('[name='无论您表单中的名称属性是什么']').val()}；} */}，regex p : { regex p : /^[a-za-z0-9_\.] $/,消息： '用户名由数字字母下划线和。组成} }，password: { message: '密码无效，验证程序： { notempty : { message : }密码不能为空}，stringLength: { min: 6，max: 30，message: '用户名长度必须在6到30之间}，识别号： {//相同字段： '密码',//需要进行比较的输入名称值消息： '两次密码不一致}，different: {//不能和用户名相同字段："用户名",//需要进行比较的输入名称值消息： '不能和用户名相同}，regex p : { regex p : /^[a-za-z0-9_\.] $/，消息： '用户名只能由字母、数字、点号和下划线组成} } }，repassword: { message: '密码无效，验证程序： { notempty : { message : }用户名不能为空}，stringLength: { min: 6，max: 30，message: '用户名长度必须在6到30之间}，识别号： {//相同字段： '密码，消息： '两次密码不一致}，different: {//不能和用户名相同字段： '用户名，消息： '不能和用户名相同}，regexp: {//匹配规则regexp:] $/，message: '用户名只能由字母、数字、点号和下划线组成} }，电子邮件： {验证器3360 { notempty : { message : '邮件不能为空}，emailAddress: { message: '请输入正确的邮件地址如：[emailprotected]' } } }，phone: { message: '电话无效，验证程序： { notempty : { message : '手机号码不能为空}，stringLength: { min: 11，max: 11，message: '请输入11位手机号码}，regex p : { regex p : /^1[3|5|8]{1}[0-9]{9}$/，消息： '请输入正确的手机号码} } }，invite: { message: '邀请码，验证程序： { notempty : { message : }邀请码不能为空}，stringLength: { min: 8，max: 8，message: '请输入正确长度的邀请码}，regex p : { regex p : /^[\w]{8}$/，消息： '请输入正确的邀请码（包含数字字母)' } } }, } }) . on('success.form.bv '，function(e) {//点击提交之后//阻止表单提交e . prevent default()；//获取表单实例var $ form=$(e . target)；//获取bootstrapvvalidator实例var bv=$ form。数据(' bootstrapvvalidator ')；//使用埃阿斯提交表单数据提交至形式标签中的行动、结果自定义$.post($form.attr('action ')，$form.serialize()，function(result){//做点什么.});});});效果图：