index.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap Validate demo</title>
  5. <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
  6. <!--[if IE 7]>
  7. <link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome-ie7.min.css">
  8. <![endif]-->
  9. <link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.min.css"/>
  10. <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
  11. <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
  12. <script type="text/javascript" src="../src/js/bootstrapValidate.js"></script>
  13. <script type="text/javascript" src="../src/js/validator/notEmpty.js"></script>
  14. <script type="text/javascript" src="../src/js/validator/stringLength.js"></script>
  15. <script type="text/javascript" src="../src/js/validator/regexp.js"></script>
  16. </head>
  17. <body>
  18. <div class="container">
  19. <div class="row">
  20. <!-- form: -->
  21. <section>
  22. <div class="page-header">
  23. <h2>Default Bootstrap form</h2>
  24. </div>
  25. <div class="col-lg-4 col-lg-offset-4">
  26. <form id="defaultForm" method="post">
  27. <div class="form-group">
  28. <input type="text" class="form-control" name="username" placeholder="Username" />
  29. </div>
  30. <div class="form-group">
  31. <input type="text" class="form-control" name="email" placeholder="Email" />
  32. </div>
  33. <div class="form-group">
  34. <input type="password" class="form-control" name="password" placeholder="Password" />
  35. </div>
  36. <button type="submit" class="btn btn-primary">Sign up</button>
  37. </form>
  38. </div>
  39. </section>
  40. </div>
  41. </div>
  42. <script type="text/javascript">
  43. $(document).ready(function() {
  44. $('#defaultForm').bootstrapValidate({
  45. fields: {
  46. username: {
  47. message: 'The username is not valid',
  48. validator: {
  49. notEmpty: {
  50. message: 'The username is required and can\'t be empty'
  51. },
  52. stringLength: {
  53. min: 6,
  54. max: 30,
  55. message: 'The username must be more than 6 and less than 30 characters long'
  56. },
  57. regexp: {
  58. regexp: /^[a-zA-Z0-9_\.]+$/,
  59. message: 'The username can only consist of alphabetical, number, dot and underscore'
  60. }
  61. }
  62. },
  63. email: {
  64. validator: {
  65. emailAddress: {
  66. message: 'The value is not a valid email address'
  67. }
  68. }
  69. }
  70. },
  71. message: 'This value is not valid',
  72. iconClass: {
  73. valid: 'icon-ok',
  74. invalid: 'icon-remove'
  75. }
  76. });
  77. });
  78. </script>
  79. </body>
  80. </html>