首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery插件bootstrapValidator数据验证详解

Posted in Javascript onNovember 09, 2016

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

bootstrap：能够增加兼容性的强大框架.

需要引用css：

bootstrap.min.css

bootstrapValidator.min.css

js:

jquery-1.10.2.min.js

bootstrap.min.js

bootstrapValidator.min.js

（下载实例）

以上这些都是必须的。

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

<!DOCTYPE html>
<html>
<head>
 <title>Using Ajax to submit data</title>

 <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
 <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

 <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
 <!-- class都是bootstrap定义好的样式，验证是根据input中的name值 -->
 <form id="defaultForm" method="post" class="form-horizontal" action="ajaxSubmit.php">
 <!-- 下面这个div必须要有，插件根据这个进行添加提示 -->
 <div class="form-group">
  <label class="col-lg-3 control-label">Username</label>
  <div class="col-lg-5">
  <input type="text" class="form-control" name="username" />
  </div>
 </div>

 <div class="form-group">
  <label class="col-lg-3 control-label">Email address</label>
  <div class="col-lg-5">
  <input type="text" class="form-control" name="email" />
  </div>
 </div>

 <div class="form-group">
  <label class="col-lg-3 control-label">Password</label>
  <div class="col-lg-5">
  <input type="password" class="form-control" name="password" />
  </div>
 </div>

 <div class="form-group">
  <div class="col-lg-9 col-lg-offset-3">
  <button type="submit" class="btn btn-primary">Sign up</button>
  </div>
 </div>
 </form>

</div>
<script type="text/javascript">
$(document).ready(function() {
 /**
 * 下面是进行插件初始化
 * 你只需传入相应的键值对
 * */
 $('#defaultForm').bootstrapValidator({
 message: 'This value is not valid',
 feedbackIcons: {/*输入框不同状态，显示图片的样式*/
 valid: 'glyphicon glyphicon-ok',
 invalid: 'glyphicon glyphicon-remove',
 validating: 'glyphicon glyphicon-refresh'
 },
 fields: {/*验证*/
 username: {/*键名username和input name值对应*/
  message: 'The username is not valid',
  validators: {
  notEmpty: {/*非空提示*/
  message: '用户名不能为空'
  },
  stringLength: {/*长度提示*/
  min: 6,
  max: 30,
  message: '用户名长度必须在6到30之间'
  }/*最后一个没有逗号*/
  }
 },
 password: {
  message:'密码无效',
  validators: {
  notEmpty: {
  message: '密码不能为空'
  },
  stringLength: {
  min: 6,
  max: 30,
  message: '用户名长度必须在6到30之间'
  }
  }
 },
 email: {
  validators: {
  notEmpty: {
  message: 'The email address is required and can\'t be empty'
  },
  emailAddress: {
  message: 'The input is not a valid email address'
  }
  }
 }
 }
 });
});
</script>
</body>
</html>

这是最基本的，例子直接复制到本地，并且导入需要的css和js文件（JS中username，password等键值名和input标签中name属性值对应），运行就能够进行非空，长度验证，完全不需要管css样式。

效果图如下：

jquery插件bootstrapValidator数据验证详解

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

如下只要在input相对应的键值中加入一个regexp:{}键值对（在上面的js基础上修改）

username: {/*键名和input name值对应*/
  message: 'The username is not valid',
  validators: {
  notEmpty: {/*非空提示*/
  message: '用户名不能为空'
  },
  regexp: {/* 只需加此键值对，包含正则表达式，和提示 */
  regexp: /^[a-zA-Z0-9_\.]+$/,
  message: '只能是数字和字母_.'
  },
  stringLength: {/*长度提示*/
  min: 6,
  max: 30,
  message: '用户名长度必须在6到30之间'
  }/*最后一个没有逗号*/
  }
 },

效果如下：

jquery插件bootstrapValidator数据验证详解

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

需求：

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

html代码（直接替换上例子中的form即可）：

<form id="defaultForm" role="form" class="form-signin" action="registerAccount.do"
 method="post">
 <h2 class="form-signin-heading">请输入注册信息：</h2>

 <div class="form-group">
  <label for="username">用户名：</label><input class="form-control"
  type="text" name="username" id="username" />
 </div>
 <div class="form-group">
  <label for="password">密码：</label><input class="form-control"
  type="password" name="password" id="password"/>
 </div>
 <div class="form-group">
  <label for="repassword">确认密码：</label><input class="form-control"
  type="password" name="repassword" id="repassword" />
 </div>
 <div class="form-group">
  <label for="phone">手机号码：</label><input class="form-control"
  type="text" name="phone" id="phone" />
 </div>
 <div class="form-group">
  <label for="email">email:</label><input class="form-control"
  type="email" name="email" id="email" />
 </div>
 <div class="form-group">
  <label for="invite">邀请码：</label><input class="form-control"
  type="text" name="invite" id="invite">
 </div>
 <div class="form-group">
  <button class="btn btn-lg btn-primary btn-block" type="submit">确认注册</button>
  <a class="btn btn-lg btn-primary btn-block" href="../">返回首页</a>
  </div>
 </form>

js代码(直接替换例子中的JS)：

$(function(){/* 文档加载，执行一个函数*/
 $('#defaultForm')
 .bootstrapValidator({
 message: 'This value is not valid',
 feedbackIcons: {/*input状态样式图片*/
 valid: 'glyphicon glyphicon-ok',
 invalid: 'glyphicon glyphicon-remove',
 validating: 'glyphicon glyphicon-refresh'
 },
 fields: {/*验证：规则*/
 username: {//验证input项：验证规则
  message: 'The username is not valid',
 
  validators: {
  notEmpty: {//非空验证：提示消息
  message: '用户名不能为空'
  },
  stringLength: {
  min: 6,
  max: 30,
  message: '用户名长度必须在6到30之间'
  },
  threshold : 6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
  remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true} 
  url: 'exist2.do',//验证地址
  message: '用户已存在',//提示消息
  delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
  type: 'POST'//请求方式
  /**自定义提交数据，默认值提交当前input value
  * data: function(validator) {
  return {
   password: $('[name="passwordNameAttributeInYourForm"]').val(),
   whatever: $('[name="whateverNameAttributeInYourForm"]').val()
  };
  }
  */
  },
  regexp: {
  regexp: /^[a-zA-Z0-9_\.]+$/,
  message: '用户名由数字字母下划线和.组成'
  }
  }
 },
 password: {
  message:'密码无效',
  validators: {
  notEmpty: {
  message: '密码不能为空'
  },
  stringLength: {
  min: 6,
  max: 30,
  message: '用户名长度必须在6到30之间'
  },
  identical: {//相同
  field: 'password', //需要进行比较的input name值
  message: '两次密码不一致'
  },
  different: {//不能和用户名相同
  field: 'username',//需要进行比较的input name值
  message: '不能和用户名相同'
  },
  regexp: {
  regexp: /^[a-zA-Z0-9_\.]+$/,
  message: 'The username can only consist of alphabetical, number, dot and underscore'
  }
  }
 },
 repassword: {
  message: '密码无效',
  validators: {
  notEmpty: {
  message: '用户名不能为空'
  },
  stringLength: {
  min: 6,
  max: 30,
  message: '用户名长度必须在6到30之间'
  },
  identical: {//相同
  field: 'password',
  message: '两次密码不一致'
  },
  different: {//不能和用户名相同
  field: 'username',
  message: '不能和用户名相同'
  },
  regexp: {//匹配规则
  regexp: /^[a-zA-Z0-9_\.]+$/,
  message: 'The username can only consist of alphabetical, number, dot and underscore'
  }
  }
 },
 email: {
  validators: {
  notEmpty: {
  message: '邮件不能为空'
  },
  emailAddress: {
  message: '请输入正确的邮件地址如：123@qq.com'
  }
  }
 },
 phone: {
  message: 'The phone is not valid',
  validators: {
  notEmpty: {
  message: '手机号码不能为空'
  },
  stringLength: {
  min: 11,
  max: 11,
  message: '请输入11位手机号码'
  },
  regexp: {
  regexp: /^1[3|5|8]{1}[0-9]{9}$/,
  message: '请输入正确的手机号码'
  }
  }
 },
 invite: {
  message: '邀请码',
  validators: {
  notEmpty: {
  message: '邀请码不能为空'
  },
  stringLength: {
  min: 8,
  max: 8,
  message: '请输入正确长度的邀请码'
  },
  regexp: {
  regexp: /^[\w]{8}$/,
  message: '请输入正确的邀请码(包含数字字母)'
  }
  }
 },
 }
 })
 .on('success.form.bv', function(e) {//点击提交之后
 // Prevent form submission
 e.preventDefault();

 // Get the form instance
 var $form = $(e.target);

 // Get the BootstrapValidator instance
 var bv = $form.data('bootstrapValidator');

 // Use Ajax to submit form data 提交至form标签中的action，result自定义
 $.post($form.attr('action'), $form.serialize(), function(result) {
//do something...
});
 });
});

效果图：

jquery插件bootstrapValidator数据验证详解

异常：

Uncaught RangeError: Maximum call stack size exceedede
没有加class="form-group"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jquery插件bootstrapValidator数据验证详解

- Author -

黑衣帽子

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Webkit的跨域安全问题说明
Sep 13 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
jQuery之动画效果大全
Nov 09 #Javascript
jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）
Nov 09 #Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 #Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 #Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 #Javascript
H5移动端图片压缩上传开发流程
Nov 09 #Javascript
微信小程序 网络API Websocket详解
Nov 09 #Javascript
山进(2) S400(1) S500(1) Grundig(1) PL990(2) D1875(1) S700(1) ICF-SW07(1) SANGEAN(1) ATS-909X(1)
You might like
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
用javascript获取textarea中的光标位置
2008/05/06 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
推荐11个实用Python库
2015/01/23 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
python将回车作为输入内容的实例
2018/06/23 Python
python爬虫实现获取下一页代码
2020/03/13 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
银行存款证明样本
2014/01/17 职场文书
小学毕业家长寄语
2014/01/19 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
体育教师个人总结
2015/02/09 职场文书
共青团员自我评价
2015/03/10 职场文书
天堂的孩子观后感
2015/06/11 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js