基于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. hdu 3289 最大独立集

    题意:一个动物园里有N只猫和K只狗,一些小朋友来参观,他们如果喜欢狗就不喜欢猫,喜欢猫就不喜欢狗,园长想要移走一些动物,如果,移走的是某个小朋友不喜欢的,而喜欢的没被移走,该小朋友就会高兴,求移动的数 ...

  2. Gunicorn部署部分的翻译

    部署Gunicorn 文档建议Gunicorn最好是用在代理服务器后面.(等于前面最好加一个反向代理) Nginx Configuration 文档建议用Nginx,当然用其他也可以,但是要确保当你用 ...

  3. AMD K7以来核心架构一览表

    转载或拿走使用请注明出处,谢谢! 注:K10以前AMD的CPU型号主要用PR值标称,故此表中未表示其准确型号

  4. ios数据保存

  5. Eclipse中执行Maven命令时控制台输出乱码

    Maven 默认编码为 GBK: 在 Eclipse 控制台输出乱码: 解决方法:将以下代码添加到 pom.xml 的 <project> 节点下: <project> …… ...

  6. svn简单记录

    记录一下工作中常用到的svn命令 一.文件的提交流程 1.svn up   // 先更新本地文件 2.svn st   // svn status 查看要提交的文件 3.#svn ci -m &quo ...

  7. UIScrollView 遇到的小坑

    在做一个 UIScrollView  展示的时候 ,须要计算 contentSize 的高度,于是 我遍历了一下 UIScrollView 全部的子view的高度累加 然后得出 高度 .奇怪的是 发现 ...

  8. Freescale OSBDM JM60仿真器 BGND Interface

    The BGND interface provides the standard 6 pin connection for the single wire BGND signal type devel ...

  9. STM32F4xx -- Cortex M4

    STM32F4xx official page: http://www.st.com/internet/mcu/subclass/1521.jspIntroductionFPU - Floating ...

  10. bitnami下mysql配置-包含phpMyAdmin配置

    mysql开启远程访问: 默认情况下mysql的绑定ip是bind-address=127.0.0.1 找到my.cnf bitnami@linux:~$ sudo find / -name my.c ...