官网下载地址：http://plugins.jquery.com/bootstrapValidator/

html代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>BootstrapValidator demo</title>
  5.  
  6.     <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
  7.     <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
  8.  
  9.     <!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
  10.     <!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />-->
  11.  
  12.     <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
  13.     <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
  14.     <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
  15. </head>
  16. <body>
  17.     <div class="container">
  18.         <div class="row">
  19.             <!-- form: -->
  20.             <section>
  21.                 <div class="col-lg-8 col-lg-offset-2">
  22.                     <div class="page-header">
  23.                         <h2>Sign up</h2>
  24.                     </div>
  25.  
  26.                     <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
  27.                         <div class="form-group">
  28.                             <label class="col-lg-3 control-label">Full name</label>
  29.                             <div class="col-lg-4">
  30.                                 <input type="text" class="form-control" name="firstName" placeholder="First name" />
  31.                             </div>
  32.                             <div class="col-lg-4">
  33.                                 <input type="text" class="form-control" name="lastName" placeholder="Last name" />
  34.                             </div>
  35.                         </div>
  36.  
  37.                         <div class="form-group">
  38.                             <label class="col-lg-3 control-label">Username</label>
  39.                             <div class="col-lg-5">
  40.                                 <input type="text" class="form-control" name="username" />
  41.                             </div>
  42.                         </div>
  43.  
  44.                         <div class="form-group">
  45.                             <label class="col-lg-3 control-label">Email address</label>
  46.                             <div class="col-lg-5">
  47.                                 <input type="text" class="form-control" name="email" />
  48.                             </div>
  49.                         </div>
  50.  
  51.                         <div class="form-group">
  52.                             <label class="col-lg-3 control-label">Password</label>
  53.                             <div class="col-lg-5">
  54.                                 <input type="password" class="form-control" name="password" />
  55.                             </div>
  56.                         </div>
  57.  
  58.                         <div class="form-group">
  59.                             <label class="col-lg-3 control-label">Retype password</label>
  60.                             <div class="col-lg-5">
  61.                                 <input type="password" class="form-control" name="confirmPassword" />
  62.                             </div>
  63.                         </div>
  64.  
  65.                         <div class="form-group">
  66.                             <label class="col-lg-3 control-label">Gender</label>
  67.                             <div class="col-lg-5">
  68.                                 <div class="radio">
  69.                                     <label>
  70.                                         <input type="radio" name="gender" value="male" /> Male
  71.                                     </label>
  72.                                 </div>
  73.                                 <div class="radio">
  74.                                     <label>
  75.                                         <input type="radio" name="gender" value="female" /> Female
  76.                                     </label>
  77.                                 </div>
  78.                                 <div class="radio">
  79.                                     <label>
  80.                                         <input type="radio" name="gender" value="other" /> Other
  81.                                     </label>
  82.                                 </div>
  83.                             </div>
  84.                         </div>
  85.  
  86.                         <div class="form-group">
  87.                             <label class="col-lg-3 control-label">Birthday</label>
  88.                             <div class="col-lg-5">
  89.                                 <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
  90.                             </div>
  91.                         </div>
  92.  
  93.                         <div class="form-group">
  94.                             <label class="col-lg-3 control-label">Languages</label>
  95.                             <div class="col-lg-5">
  96.                                 <div class="checkbox">
  97.                                     <label>
  98.                                         <input type="checkbox" name="languages[]" value="english" /> English
  99.                                     </label>
  100.                                 </div>
  101.                                 <div class="checkbox">
  102.                                     <label>
  103.                                         <input type="checkbox" name="languages[]" value="french" /> French
  104.                                     </label>
  105.                                 </div>
  106.                                 <div class="checkbox">
  107.                                     <label>
  108.                                         <input type="checkbox" name="languages[]" value="german" /> German
  109.                                     </label>
  110.                                 </div>
  111.                                 <div class="checkbox">
  112.                                     <label>
  113.                                         <input type="checkbox" name="languages[]" value="russian" /> Russian
  114.                                     </label>
  115.                                 </div>
  116.                                 <div class="checkbox">
  117.                                     <label>
  118.                                         <input type="checkbox" name="languages[]" value="other" /> Other
  119.                                     </label>
  120.                                 </div>
  121.                             </div>
  122.                         </div>
  123.  
  124.                         <div class="form-group">
  125.                             <label class="col-lg-3 control-label">Programming Languages</label>
  126.                             <div class="col-lg-5">
  127.                                 <div class="checkbox">
  128.                                     <label>
  129.                                         <input type="checkbox" name="programs[]" value="net" /> .Net
  130.                                     </label>
  131.                                 </div>
  132.                                 <div class="checkbox">
  133.                                     <label>
  134.                                         <input type="checkbox" name="programs[]" value="java" /> Java
  135.                                     </label>
  136.                                 </div>
  137.                                 <div class="checkbox">
  138.                                     <label>
  139.                                         <input type="checkbox" name="programs[]" value="c" /> C/C++
  140.                                     </label>
  141.                                 </div>
  142.                                 <div class="checkbox">
  143.                                     <label>
  144.                                         <input type="checkbox" name="programs[]" value="php" /> PHP
  145.                                     </label>
  146.                                 </div>
  147.                                 <div class="checkbox">
  148.                                     <label>
  149.                                         <input type="checkbox" name="programs[]" value="perl" /> Perl
  150.                                     </label>
  151.                                 </div>
  152.                                 <div class="checkbox">
  153.                                     <label>
  154.                                         <input type="checkbox" name="programs[]" value="ruby" /> Ruby
  155.                                     </label>
  156.                                 </div>
  157.                                 <div class="checkbox">
  158.                                     <label>
  159.                                         <input type="checkbox" name="programs[]" value="python" /> Python
  160.                                     </label>
  161.                                 </div>
  162.                                 <div class="checkbox">
  163.                                     <label>
  164.                                         <input type="checkbox" name="programs[]" value="javascript" /> Javascript
  165.                                     </label>
  166.                                 </div>
  167.                             </div>
  168.                         </div>
  169.  
  170.                         <div class="form-group">
  171.                             <label class="col-lg-3 control-label" id="captchaOperation"></label>
  172.                             <div class="col-lg-2">
  173.                                 <input type="text" class="form-control" name="captcha" />
  174.                             </div>
  175.                         </div>
  176.  
  177.                         <div class="form-group">
  178.                             <div class="col-lg-9 col-lg-offset-3">
  179.                                 <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
  180.                                 <button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up </button>
  181.                                 <button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>
  182.                                 <button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
  183.                             </div>
  184.                         </div>
  185.                     </form>
  186.                 </div>
  187.             </section>
  188.             <!-- :form -->
  189.         </div>
  190.     </div>
  191.  
  192. <script type="text/javascript">
  193. $(document).ready(function() {
  194.     // Generate a simple captcha
  195.     function randomNumber(min, max) {
  196.         return Math.floor(Math.random() * (max - min + ) + min);
  197.     };
  198.     $('#captchaOperation').html([randomNumber(, ), '+', randomNumber(, ), '='].join(' '));
  199.  
  200.     $('#defaultForm').bootstrapValidator({
  201. //        live: 'disabled',
  202.         message: 'This value is not valid',
  203.         feedbackIcons: {
  204.             valid: 'glyphicon glyphicon-ok',
  205.             invalid: 'glyphicon glyphicon-remove',
  206.             validating: 'glyphicon glyphicon-refresh'
  207.         },
  208.         fields: {
  209.             firstName: {
  210.                 group: '.col-lg-4',
  211.                 validators: {
  212.                     notEmpty: {
  213.                         message: 'The first name is required and cannot be empty'
  214.                     }
  215.                 }
  216.             },
  217.             lastName: {
  218.                 group: '.col-lg-4',
  219.                 validators: {
  220.                     notEmpty: {
  221.                         message: 'The last name is required and cannot be empty'
  222.                     }
  223.                 }
  224.             },
  225.             username: {
  226.                 message: 'The username is not valid',
  227.                 validators: {
  228.                     notEmpty: {
  229.                         message: 'The username is required and cannot be empty'
  230.                     },
  231.                     stringLength: {
  232.                         min: ,
  233.                         max: ,
  234.                         message: 'The username must be more than 6 and less than 30 characters long'
  235.                     },
  236.                     regexp: {
  237.                         regexp: /^[a-zA-Z0-9_\.]+$/,
  238.                         message: 'The username can only consist of alphabetical, number, dot and underscore'
  239.                     },
  240.                     remote: {
  241.                         type: 'POST',
  242.                         url: 'remote.php',
  243.                         message: 'The username is not available'
  244.                     },
  245.                     different: {
  246.                         field: 'password,confirmPassword',
  247.                         message: 'The username and password cannot be the same as each other'
  248.                     }
  249.                 }
  250.             },
  251.             email: {
  252.                 validators: {
  253.                     emailAddress: {
  254.                         message: 'The input is not a valid email address'
  255.                     }
  256.                 }
  257.             },
  258.             password: {
  259.                 validators: {
  260.                     notEmpty: {
  261.                         message: 'The password is required and cannot be empty'
  262.                     },
  263.                     identical: {
  264.                         field: 'confirmPassword',
  265.                         message: 'The password and its confirm are not the same'
  266.                     },
  267.                     different: {
  268.                         field: 'username',
  269.                         message: 'The password cannot be the same as username'
  270.                     }
  271.                 }
  272.             },
  273.             confirmPassword: {
  274.                 validators: {
  275.                     notEmpty: {
  276.                         message: 'The confirm password is required and cannot be empty'
  277.                     },
  278.                     identical: {
  279.                         field: 'password',
  280.                         message: 'The password and its confirm are not the same'
  281.                     },
  282.                     different: {
  283.                         field: 'username',
  284.                         message: 'The password cannot be the same as username'
  285.                     }
  286.                 }
  287.             },
  288.             birthday: {
  289.                 validators: {
  290.                     date: {
  291.                         format: 'YYYY/MM/DD',
  292.                         message: 'The birthday is not valid'
  293.                     }
  294.                 }
  295.             },
  296.             gender: {
  297.                 validators: {
  298.                     notEmpty: {
  299.                         message: 'The gender is required'
  300.                     }
  301.                 }
  302.             },
  303.             'languages[]': {
  304.                 validators: {
  305.                     notEmpty: {
  306.                         message: 'Please specify at least one language you can speak'
  307.                     }
  308.                 }
  309.             },
  310.             'programs[]': {
  311.                 validators: {
  312.                     choice: {
  313.                         min: ,
  314.                         max: ,
  315.                         message: 'Please choose 2 - 4 programming languages you are good at'
  316.                     }
  317.                 }
  318.             },
  319.             captcha: {
  320.                 validators: {
  321.                     callback: {
  322.                         message: 'Wrong answer',
  323.                         callback: function(value, validator) {
  324.                             var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[]) + parseInt(items[]);
  325.                             return value == sum;
  326.                         }
  327.                     }
  328.                 }
  329.             }
  330.         }
  331.     });
  332.  
  333.     // Validate the form manually
  334.     $('#validateBtn').click(function() {
  335.         $('#defaultForm').bootstrapValidator('validate');
  336.     });
  337.  
  338.     $('#resetBtn').click(function() {
  339.         $('#defaultForm').data('bootstrapValidator').resetForm(true);
  340.     });
  341. });
  342. </script>
  343. </body>
  344. </html>

bootstrapValidator 表单验证的更多相关文章

  1. BootstrapValidator 表单验证超详细教程

    一. 引入js 和css文件 在有jquery和bootstrap的页面里引入 bootstrapValidator.js bootstrapValidator.css 链接: https://pan ...

  2. BootStrapValidator表单验证插件的学习和使用

    BootStrapValidator表单验证插件的学习和使用 引入标签 <script type="text/javascript" src="https://cd ...

  3. bootstrapValidator表单验证插件

    bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档:http://bootstrapvalidator.votin ...

  4. 表单验证——JqueryValidator、BootstrapValidator

    表单验证两种方式: 1.JqueryValidator <!DOCTYPE html> <html lang="en"> <head> < ...

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

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

  6. 【前端_js】Bootstrap之表单验证

    Bootstrap表单验证插件bootstrapValidator使用方法整理 BootstrapValidator 表单验证超详细教程    

  7. Bootstrap表单验证插件bootstrapValidator使用方法整理

    插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...

  8. JS组件系列——Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  9. bootstrapValidator.js，最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

随机推荐

  1. C#学习笔记（5）——大项目查找

    说明(2017-5-27 16:34:39): 1. 注意事项: (0)设计窗体,添加一个dgv,添加5个列名,修改名字和绑定数据. (1)添加引用,system.data.sqlclient (2) ...

  2. 3. DNN神经网络的正则化

    1. DNN神经网络的前向传播(FeedForward) 2. DNN神经网络的反向更新(BP) 3. DNN神经网络的正则化 1. 前言 和普通的机器学习算法一样,DNN也会遇到过拟合的问题,需要考 ...

  3. iOS微信实现第三方登录的方法

    这篇文章主要介绍了iOS微信第三方登录实现的全过程,一步一步告诉大家iOS微信实现第三方登录的方法,感兴趣的小伙伴们可以参考一下   一.接入微信第三方登录准备工作.移动应用微信登录是基于OAuth2 ...

  4. Grunt经常使用插件及演示样例说明

    下述给出了经常使用Grunt插件,并列举了部分插件演示样例: 插件名称 说明 Github地址 grunt-contrib-clean 清空文件和目录 https://github.com/grunt ...

  5. mvn打包spring工程成jar时报Unable to locate Spring NamespaceHandler for XML schema namespace错误解决办法

    有一个小工程,使用了spring,在使用maven的assembly打包成独立可执行的jar包后,在执行时报如下错误:Configuration problem: Unable to locate S ...

  6. redis连接超时问题排查

    连接池无法获取到连接或获取连接超时redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource f ...

  7. const_cast的应用

    对于const变量,我们不能修改它的值,这是这个限定符最直接的表现.但是我们就是想违背它的限定希望修改其内容怎么办呢?于是我们可以使用const_cast转换符是用来移除变量的const限定符.con ...

  8. css 超详细文档

    http://www.runoob.com/css/css-boxmodel.html

  9. Java finally语句是在try或catch的retrurn之前还是之后执行

    若try或catch中没有return语句,则按正常执行流,从上到下,finally里的所有修改都生效. 这里讨论的是try或catch里有return或throw语句的情形,此情形比较让人迷惑. 总 ...

  10. Enums and Lookup Tables with EF Code First

    With EntityFramework’s support for enums, there is no longer any need to include lookup tables in th ...