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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
PHP的历史和优缺点
2006/10/09 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python测试驱动开发实例
2014/10/08 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
python super用法及原理详解
2020/01/20 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
竞选劳动委员演讲稿
2014/04/28 职场文书
活动总结怎么写啊
2014/05/07 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
2014年终工作总结范本
2014/12/15 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书