1.引入js、css

2.用法

API:http://bootstrapvalidator.votintsev.ru/api/

参考博客:https://blog.csdn.net/u013938465/article/details/53507109

https://blog.csdn.net/freedom_wbs/article/details/54617741

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title></title>
  6. <link href="scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  7. <link href="scripts/bootstrap/BootValidate/bootstrapValidator.min.css" rel="stylesheet" />
  8. <script src="scripts/jquery-1.10.2.min.js"></script>
  9. <script src="scripts/bootstrap/js/bootstrap.min.js"></script>
  10. <script src="scripts/bootstrap/BootValidate/bootstrapValidator.min.js"></script>
  11. <meta charset="utf-8" />
  12. </head>
  13. <body>
  14. <form onsubmit="return myvalidate()" action="/User/Create" method="post">
  15. <div class="form-group">
  16. <label>Username</label>
  17. <input type="text" class="form-control" name="username" />
  18. </div>
  19. <div class="form-group">
  20. <label>Email address</label>
  21. <input type="text" class="form-control" name="email" />
  22. </div>
  23. <div class="form-group">
  24. <button type="submit" name="submit" class="btn btn-primary">Submit</button>
  25. </div>
  26. </form>
  27. <script>
  28. function myvalidate() {
  29. $("form").bootstrapValidator('validate');//提交验证
  30. }
  31.  
  32. $(function () {
  33. $('form').bootstrapValidator({
  34. message: 'This value is not valid',
  35. feedbackIcons: {
  36. valid: 'glyphicon glyphicon-ok',
  37. invalid: 'glyphicon glyphicon-remove',
  38. validating: 'glyphicon glyphicon-refresh'
  39. },
  40. fields: {
  41. username: {
  42. message: '用户名验证失败',
  43. validators: {
  44. notEmpty: {
  45. message: '用户名不能为空'
  46. },
  47. stringLength: {
  48. min: 6,
  49. max: 18,
  50. message: '用户名长度必须在6到18位之间'
  51. },
  52. regexp: {
  53. regexp: /^[a-zA-Z0-9_]+$/,
  54. message: '用户名只能包含大写、小写、数字和下划线'
  55. }
  56. }
  57. },
  58. email: {
  59. validators: {
  60. notEmpty: {
  61. message: '邮箱不能为空'
  62. },
  63. emailAddress: {
  64. message: '邮箱地址格式有误'
  65. }
  66. }
  67. }
  68. }
  69. });
  70. });
  71. </script>
  72. </body>
  73. </html>
  1.  

bootstrapvalidator 用法的更多相关文章

  1. BootstrapValidator验证表单用法

    引入文件 <link rel="stylesheet" href="css/bootstrap.css"/> <link rel=" ...

  2. JS组件系列——Form表单验证神器: BootstrapValidator

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

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

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

  4. bootstrapValidator.js,最好用的bootstrap表单验证插件

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

  5. 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)

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

  6. BootStrap-validator 使用记录(JAVA SpringMVC实现)

    BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题.最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章<使用bootstrapv ...

  7. Form表单验证神器: BootstrapValidator

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

  8. bootstrap bootstrapvalidator插件+adjax验证使用

    1.利用bootstrap Validator表单验证进行表单验证需要如下CSS和JS. <link rel="stylesheet" type="text/css ...

  9. BootstrapValidator:表单验证神器

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

随机推荐

  1. spring-boot-starter-thymeleaf对没有结束符的HTML5标签解析出错

    springboot 在使用thymeleaf 作为模板时,当出现未关闭标签时,如下所示代码,标签没有关闭. <link href="plugin/layui/css/layui.cs ...

  2. HTML笔记(适合新手入门)

    HTML Web 标准构成 Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合. 主要包括结构(Structure).表现(Presentation)和行为(Behavior ...

  3. ICML 2018 | 从强化学习到生成模型:40篇值得一读的论文

    https://blog.csdn.net/y80gDg1/article/details/81463731 感谢阅读腾讯AI Lab微信号第34篇文章.当地时间 7 月 10-15 日,第 35 届 ...

  4. Synchronized 和 Lock 锁在JVM中的实现原理以及代码解析

    一.深入JVM锁机制:synchronized synrhronized关键字简洁.清晰.语义明确,因此即使有了Lock接口,使用的还是非常广泛.其应用层的语义是可以把任何一个非null对象作为&qu ...

  5. 解决Chrome与jQuery菜单兼容问题

    题外,Chrome最近在耗电量方面超过了Edge,不过内存占用还是高啊,开发时偶尔用用.这不,http://jqueryui.com/menu/的官方菜单都支持的不好,改改吧! 打开jquery-ui ...

  6. Django 类视图

    引文 所有的类视图都继承django.views.generic.base.View类. 在URLconf中简单的使用通用视图 如果只是简单的做一些属性修改,可以使用as_view()方法,如下所示: ...

  7. Python基于dtw实现股票预测【多线程】

    # -*- coding: utf-8 -*- """ Created on Tue Dec 4 08:53:08 2018 @author: zhen "&q ...

  8. H5——简易马祖

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. SQL Server "允许远程连接到此服务器" 配置

    在SQL Server的属性-->连接中我们可以看到这样一个选项:'允许远程连接到此服务器'(英文是remote access),其默认值是1,表示此选项开启. 但是这个参数并非是字面上所显示的 ...

  10. cmd是命令提示符吗?

    经常使用电脑的小伙伴对cmd有所了解,它能帮我们快速解决问题.搜索框中输入“cmd”,就可以看到命令提示符程序了.那么,命令提示符程序和cmd到底有着什么样的联系呢?下面就为大家讲解一下. CMD是c ...