基于Bootstrap jQuery.validate Form表单验证实践

项目结构 ：
 
 
github 上源码地址：https://github.com/starzou/front-end-example    点击打开
 

1、form 表单代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap Form Template</title>
  5. <meta charset="utf-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="stylesheet" type="text/css" href="plugins/bootstrap/css/bootstrap.css"/>
  8. </head>
  9. <body>
  10. <div class="container">
  11. <h1 class="text-center text-danger">Form 示例</h1>
  12. <form role="form" class="form-horizontal" action="javascript:alert('验证成功,可以提交.');" method="post">
  13. <div class="form-group">
  14. <label class="col-md-2 control-label" for="name">Name</label>
  15. <div class="col-md-10">
  16. <input class="form-control" name="name" type="text" id="name" placeholder="Name" value="" />
  17. </div>
  18. </div>
  19. <div class="form-group">
  20. <label class="col-md-2 control-label" for="exampleInputPassword1">Password</label>
  21. <div class="col-md-10">
  22. <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  23. </div>
  24. </div>
  25. <div class="form-group">
  26. <label for="intro" class="control-label col-md-2">Intro</label>
  27. <div class="col-md-10">
  28. <textarea id="intro" class="form-control" rows="3" name="intro" placeholder="Intro"></textarea>
  29. </div>
  30. </div>
  31. <div class="form-group">
  32. <label class="control-label col-md-2">Gender</label>
  33. <div class="col-md-10">
  34. <label class="radio-inline">
  35. <input type="radio" name="gender"  value="男" />
  36. boy </label>
  37. <label class="radio-inline">
  38. <input type="radio" name="gender"  value="女" />
  39. gril </label>
  40. </div>
  41. </div>
  42. <div class="form-group">
  43. <label for="hobby" class="control-label col-md-2">Hobby</label>
  44. <div class="col-md-10">
  45. <div class="checkbox">
  46. <label>
  47. <input type="checkbox" name="hobby" value="Music">
  48. Music</label>
  49. </div>
  50. <div class="checkbox">
  51. <label>
  52. <input type="checkbox" name="hobby" id="" value="Game" />
  53. Game </label>
  54. </div>
  55. <label class="checkbox-inline">
  56. <input type="checkbox" id="inlineCheckbox1" value="option1">
  57. option1 </label>
  58. <label class="checkbox-inline">
  59. <input type="checkbox" id="inlineCheckbox2" value="option2">
  60. option3</label>
  61. <label class="checkbox-inline">
  62. <input type="checkbox" id="inlineCheckbox3" value="option3">
  63. option3 </label>
  64. </div>
  65. </div>
  66. <div class="form-group">
  67. <label for="sel" class="control-label col-md-2">Select</label>
  68. <div class="col-md-10">
  69. <select multiple="" id="sel" name="sel" class="form-control">
  70. <option value="1">1</option>
  71. <option value="2">2</option>
  72. <option value="3">3</option>
  73. </select>
  74. </div>
  75. </div>
  76. <div class="form-group">
  77. <div class="col-md-offset-2 col-md-10">
  78. <button type="submit" class="btn btn-primary btn-sm">
  79. Submit
  80. </button>
  81. <button type="reset" class="btn btn-primary btn-sm">
  82. Reset
  83. </button>
  84. </div>
  85. </div>
  86. </form>
  87. </div>
  88. <script src="plugins/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
  89. <script src="plugins/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
  90. <script src="plugins/jquery-validation/dist/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
  91. <script src="scripts/form.js" type="text/javascript" charset="utf-8"></script>
  92. <script type="text/javascript" charset="utf-8">
  93. MyValidator.init();
  94. </script>
  95. </body>
  96. </html>

需要引用 jquery.js，bootstrap.js，jquery.validate.js 库

 

2、form.js 代码

  1. var MyValidator = function() {
  2. var handleSubmit = function() {
  3. $('.form-horizontal').validate({
  4. errorElement : 'span',
  5. errorClass : 'help-block',
  6. focusInvalid : false,
  7. rules : {
  8. name : {
  9. required : true
  10. },
  11. password : {
  12. required : true
  13. },
  14. intro : {
  15. required : true
  16. }
  17. },
  18. messages : {
  19. name : {
  20. required : "Username is required."
  21. },
  22. password : {
  23. required : "Password is required."
  24. },
  25. intro : {
  26. required : "Intro is required."
  27. }
  28. },
  29. highlight : function(element) {
  30. $(element).closest('.form-group').addClass('has-error');
  31. },
  32. success : function(label) {
  33. label.closest('.form-group').removeClass('has-error');
  34. label.remove();
  35. },
  36. errorPlacement : function(error, element) {
  37. element.parent('div').append(error);
  38. },
  39. submitHandler : function(form) {
  40. form.submit();
  41. }
  42. });
  43. $('.form-horizontal input').keypress(function(e) {
  44. if (e.which == 13) {
  45. if ($('.form-horizontal').validate().form()) {
  46. $('.form-horizontal').submit();
  47. }
  48. return false;
  49. }
  50. });
  51. }
  52. return {
  53. init : function() {
  54. handleSubmit();
  55. }
  56. };
  57. }();
 

效果 ：

基于Bootstrap+jQuery.validate Form表单验证实践的更多相关文章

  1. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  2. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  3. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  4. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  5. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...

  6. jquery.validate.js表单验证 jquery.validate.js的用法

    jquery.validate.js这个插件已经用了2年多了,是一个不可多得的表单验证最方便快捷的插件.基于jquery的小插件,基本小白一学就会上手,对于项目表单页面比较多,元素比较多的校验,该插件 ...

  7. jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  8. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

  9. jQuery Validate 插件[表单验证]

    在客户端添加信息提交表单时我们经常需要做一些验证,比如验证不能为空,验证客户输入手机格式,验证客户输入email,url等的格式,我们可以通过EL表达式结合js 进行自主验证,今天总结一个JQuery ...

随机推荐

  1. BZOJ.1926.[SDOI2010]粟粟的书架(前缀和 主席树 二分)

    题目链接 题意: 在给定矩形区域内找出最少的数,满足和>=k.输出数的个数.两种数据范围. 0~50 注意到(真没注意到...)P[i,j]<=1000,我们可以利用前缀和预处理. num ...

  2. Prim算法和Kruskal算法

       Prim算法和Kruskal算法都能从连通图找出最小生成树.区别在于Prim算法是以某个顶点出发挨个找,而Kruskal是先排序边,每次选出最短距离的边再找. 一.Prim(普里姆算法)算法: ...

  3. 【Tsinsen-A1486】树（王康宁） 点分治 + Trie

    A1486. 树(王康宁) 时间限制:1.0s   内存限制:512.0MB   总提交次数:455   AC次数:97   平均分:52.62 查看未格式化的试题   提交   试题讨论 试题来源 ...

  4. [Java]jdbc[转]

    >>http://www.cnblogs.com/xiohao/p/3507483.html >>http://www.cnblogs.com/hongten/archive/ ...

  5. SlickMaster.NET 开源表单设计器快速使用指南

    前言:在企业数据处理过程中,经常需要通过定制表单来输入业务数据.由于涉及的数据比较离散,并不同于ERP系统的紧密关联数据.假如由开发人员每个增加页面,工作量会比较大,后期后期的维护很升级也耗费时间和精 ...

  6. PHP开启curl_init

    windows主机出现“Call to undefined function curl_init”错误提示,没有定义的函数,也就是php还没打开对curl_init函数的支持. 全文:http://j ...

  7. android音乐播放器开发 SweetMusicPlayer 摇一摇换歌

    上一篇写了怎样在线匹配歌词,http://blog.csdn.net/huweigoodboy/article/details/39878063,如今来讲讲摇一摇功能开发. 相同用了一个Service ...

  8. .Net Discovery 系列之七--深入理解.Net垃圾收集机制(拾贝篇)

    关于.Net垃圾收集器(Garbage Collection),Aicken已经在“.Net Discovery 系列”文章中有2篇的涉及,这一篇文章是对上2篇文章的补充,关于“.Net Discov ...

  9. (Delphi) Using the Disk Cache 使用磁盘缓存

    The Chilkat Spider component has disk caching capabilities. To setup a disk cache, create a new dire ...

  10. IIS日志文件清理

    如何清除IIS日志以释放空间 打开“我的电脑”发现10GB容量的C盘只剩余355MB“可用空间”,已经严重不够用.如下图: 如果服务器的管理员并没有在C盘存储大容量文件,而IIS中站点的访问量又非常大 ...