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入门教程(11) js事件处理
Jan 31 Javascript
JavaScript Sort 表格排序
Oct 31 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 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 getsiteurl()函数
2009/09/05 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
详解php中反射的应用
2016/03/15 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
python中的句柄操作的方法示例
2019/06/20 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python之语音识别speech模块
2020/09/09 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
网络事业创业计划书范文
2014/01/09 职场文书
科研先进个人典型材料
2014/01/31 职场文书
民用住房租房协议书
2014/10/29 职场文书
公司周年庆寄语
2019/06/21 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
浅谈MySQL之select优化方案
2021/08/07 MySQL
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android