BootstrapValidator 验证表单

在线实例

实例演示

使用方法

1. <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
2. <div class="form-group">
3. <label class="col-lg-3 control-label">用户名</label>
4. <div class="col-lg-5">
5. <input type="text" class="form-control" name="username" />
6. </div>
7. </div>
8. <div class="form-group">
9. <label class="col-lg-3 control-label">邮箱</label>
10. <div class="col-lg-5">
11. <input type="text" class="form-control" name="email" />
12. </div>
13. </div>
14. <div class="form-group">
15. <label class="col-lg-3 control-label">生日</label>
16. <div class="col-lg-5">
17. <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
18. </div>
19. </div>
20. <div class="form-group">
21. <div class="col-lg-9 col-lg-offset-3">
22. <button type="submit" class="btn btn-primary" name="signup" value="Sign up">提交</button>
23. <button type="button" class="btn btn-info" id="validateBtn">自动验证</button>
24. <button type="button" class="btn btn-info" id="resetBtn">重置表单</button>
25. </div>
26. </div>
27. </form>

复制

1. $(‘#defaultForm‘).bootstrapValidator({
2. message: ‘This value is not valid‘,
3. feedbackIcons: {
4. valid: ‘glyphicon glyphicon-ok‘,
5. invalid: ‘glyphicon glyphicon-remove‘,
6. validating: ‘glyphicon glyphicon-refresh‘
7. },
8. fields: {
9. username: {
10. message: ‘The username is not valid‘,
11. validators: {
12. notEmpty: {
13. message: ‘The username is required and cannot be empty‘
14. },
15. stringLength: {
16. min: 6,
17. max: 30,
18. message: ‘The username must be more than 6 and less than 30 characters long‘
19. },
20. regexp: {
21. regexp: /^[a-zA-Z0-9_\.]+$/,
22. message: ‘The username can only consist of alphabetical, number, dot and underscore‘
23. },
24. remote: {
25. url: ‘remote.php‘,
26. message: ‘The username is not available‘
27. },
28. different: {
29. field: ‘password‘,
30. message: ‘The username and password cannot be the same as each other‘
31. }
32. }
33. },
34. email: {
35. validators: {
36. emailAddress: {
37. message: ‘The input is not a valid email address‘
38. }
39. }
40. },
41. }
42. });

复制

参数详解