Bootstrap Validator 表单验证
发布于 2017-03-28 11:17:05 | 215 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Bootstrap v3教程，程序狗速度看过来！
Bootstrap Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
这篇文章主要介绍了Bootstrap Validator 表单验证的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
在线演示地址：http://www.shouce.ren/study/api/s/jq--BootstrapValidator--index.html
使用方法，代码如下所示：
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.
9. <div class="form-group">
10. <label class="col-lg-3 control-label">邮箱</label>
11. <div class="col-lg-5">
12. <input type="text" class="form-control" name="email" />
13. </div>
14. </div>
15.
16. <div class="form-group">
17. <label class="col-lg-3 control-label">生日</label>
18. <div class="col-lg-5">
19. <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
20. </div>
21. </div>
22.
23. <div class="form-group">
24. <div class="col-lg-9 col-lg-offset-3">
25. <button type="submit" class="btn btn-primary" name="signup" value="Sign up">提交</button>
26. <button type="button" class="btn btn-info" id="validateBtn">自动验证</button>
27. <button type="button" class="btn btn-info" id="resetBtn">重置表单</button>
28. </div>
29. </div>
30.</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.});
以上所述是小编给大家介绍的Bootstrap Validator 表单验证的全部叙述，希望对大家有所帮助，如果大家想了解更多内容敬请关注phperz！
推荐阅读
最新资讯