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 相关文章推荐
js正则表达式的使用详解
Jul 09 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 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垃圾回收机制简单说明
2010/07/22 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
ppk谈JavaScript style属性
2008/10/10 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python正则表达式完全指南
2017/05/25 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
存储过程和函数的区别
2013/05/28 面试题
七一建党节演讲稿
2014/09/11 职场文书
无罪辩护词范文
2015/05/21 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android