Bootstrap Validator 表单验证


Posted in Javascript onJuly 25, 2016

在线演示地址:http://www.shouce.ren/study/api/s/jq--BootstrapValidator--index.html

使用方法,代码如下所示:

1.<form id="defaultForm" method="post" class="form-horizontal" action="target.php"> 
2. <div class="form-group"> 
3. <label class="col-lg-3 control-label">用户名</label> 
4. <div class="col-lg-5"> 
5. <input type="text" class="form-control" name="username" /> 
6. </div> 
7. </div> 
8. 
9. <div class="form-group"> 
10. <label class="col-lg-3 control-label">邮箱</label> 
11. <div class="col-lg-5"> 
12. <input type="text" class="form-control" name="email" /> 
13. </div> 
14. </div> 
15. 
16. <div class="form-group"> 
17. <label class="col-lg-3 control-label">生日</label> 
18. <div class="col-lg-5"> 
19. <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD) 
20. </div> 
21. </div> 
22. 
23. <div class="form-group"> 
24. <div class="col-lg-9 col-lg-offset-3"> 
25. <button type="submit" class="btn btn-primary" name="signup" value="Sign up">提交</button> 
26. <button type="button" class="btn btn-info" id="validateBtn">自动验证</button> 
27. <button type="button" class="btn btn-info" id="resetBtn">重置表单</button> 
28. </div> 
29. </div> 
30.</form>
1.$('#defaultForm').bootstrapValidator({ 
2. message: 'This value is not valid', 
3. feedbackIcons: { 
4. valid: 'glyphicon glyphicon-ok', 
5. invalid: 'glyphicon glyphicon-remove', 
6. validating: 'glyphicon glyphicon-refresh' 
7. }, 
8. fields: { 
9. username: { 
10. message: 'The username is not valid', 
11. validators: { 
12. notEmpty: { 
13. message: 'The username is required and cannot be empty' 
14. }, 
15. stringLength: { 
16. min: 6, 
17. max: 30, 
18. message: 'The username must be more than 6 and less than 30 characters long' 
19. }, 
20. regexp: { 
21. regexp: /^[a-zA-Z0-9_\.]+$/, 
22. message: 'The username can only consist of alphabetical, number, dot and underscore' 
23. }, 
24. remote: { 
25. url: 'remote.php', 
26. message: 'The username is not available' 
27. }, 
28. different: { 
29. field: 'password', 
30. message: 'The username and password cannot be the same as each other' 
31. } 
32. } 
33. }, 
34. email: { 
35. validators: { 
36. emailAddress: { 
37. message: 'The input is not a valid email address' 
38. } 
39. } 
40. }, 
41. } 
42.});

Bootstrap Validator 表单验证

以上所述是小编给大家介绍的Bootstrap Validator 表单验证的全部叙述,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木!

Javascript 相关文章推荐
解析JavaScript中的标签语句
Jun 19 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 #Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 #Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 #Javascript
javascript insertAfter()定义与用法示例
Jul 25 #Javascript
jquery之别踩白块游戏的简单实现
Jul 25 #Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 #Javascript
JavaScript表单焦点自动切换代码
Jul 24 #Javascript
You might like
类的另类用法--数据的封装
2006/10/09 PHP
一个取得文件扩展名的函数
2006/10/09 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python环境变量设置方法
2016/08/28 Python
python多进程控制学习小结
2018/10/31 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
行政助理岗位职责
2013/11/10 职场文书
应届生求职信范文
2014/06/30 职场文书
毕业实习指导教师评语
2014/12/31 职场文书