index.html 3.0 KB

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