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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link href="scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <link href="scripts/bootstrap/BootValidate/bootstrapValidator.min.css" rel="stylesheet" />

    <script src="scripts/jquery-1.10.2.min.js"></script>

    <script src="scripts/bootstrap/js/bootstrap.min.js"></script>

    <script src="scripts/bootstrap/BootValidate/bootstrapValidator.min.js"></script>

    <meta charset="utf-8" />

</head>

<body>

    <form onsubmit="return myvalidate()" action="/User/Create" method="post">

        <div class="form-group">

            <label>Username</label>

            <input type="text" class="form-control" name="username" />

        </div>

        <div class="form-group">

            <label>Email address</label>

            <input type="text" class="form-control" name="email" />

        </div>

        <div class="form-group">

            <button type="submit" name="submit" class="btn btn-primary">Submit</button>

        </div>

    </form>

    <script>

        function myvalidate() {

            $("form").bootstrapValidator('validate');//提交验证

        }

        $(function () {

            $('form').bootstrapValidator({

                message: 'This value is not valid',

                feedbackIcons: {

                    valid: 'glyphicon glyphicon-ok',

                    invalid: 'glyphicon glyphicon-remove',

                    validating: 'glyphicon glyphicon-refresh'

                },

                fields: {

                    username: {

                        message: '用户名验证失败',

                        validators: {

                            notEmpty: {

                                message: '用户名不能为空'

                            },

                            stringLength: {

                                min: 6,

                                max: 18,

                                message: '用户名长度必须在6到18位之间'

                            },

                            regexp: {

                                regexp: /^[a-zA-Z0-9_]+$/,

                                message: '用户名只能包含大写、小写、数字和下划线'

                            }

                        }

                    },

                    email: {

                        validators: {

                            notEmpty: {

                                message: '邮箱不能为空'

                            },

                            emailAddress: {

                                message: '邮箱地址格式有误'

                            }

                        }

                    }

                }

            });

        });

    </script>

</body>

</html>

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. jQuery插件开发进阶

    jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. 根据<jQuery高级编程&g ...

  2. 洛谷P4591 [TJOI2018]碱基序列(hash dp)

    题意 题目链接 Sol \(f[i][j]\)表示匹配到第\(i\)个串,当前在主串的第\(j\)个位置 转移的时候判断一下是否可行就行了.随便一个能搞字符串匹配的算法都能过 复杂度\(O(|S| K ...

  3. Android SharedPreferences增，删，查操作

    SharedPreferences是Android平台上一个轻量级的存储类,用来保存应用的一些常用配置,比如Activity状态,Activity暂停时,将此activity的状态保存到SharedP ...

  4. ReactNative编写规范

    <一>  React 代码规范 文件与组件命名 扩展名: 使用.js作为js文件的扩展名.如果同一个文件夹下有同名而不同作用的js文件,则通过中缀(小写)进一步区分,例如:HomePage ...

  5. vue 构建项目vue-cli

    1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...

  6. git 入门教程之安装 git

    安装 git git 目前支持 Linux/Unix.Solaris.Mac和 Windows 平台上运行,根据自身环境选择安装. Linux 系统 linux 系统安装软件大致有两种途径,一种是利用 ...

  7. SQL Server数据库邮件发送异常案例

      最近遇到两起关于SQL Server数据库邮件发送异常的案例,这些问题也有点意思,顺便记录一下.方便以后遇到类似问题的人参考,不要被这些问题弄得抓狂! 案例1:我们一台数据库服务器突然发送邮件都不 ...

  8. Reporting Service 2008 “报表服务器数据库内出错。此错误可能是因连接失败、超时或数据库中磁盘空间不足而导致的”

    今天遇到了两个关于Reporting Service的问题, 出现问题的环境为Microsoft SQL Server 2008 R2 (SP2) - 10.50.4000.0 (X64) .具体情况 ...

  9. 最详细的C++对应C#的数据类型转换

    C++ ---------------------- C# LDWORD ----------------IntPtr LLONG-------------------Intptr bool ---- ...

  10. 单纯linux系统下hadoop2.7.3 eclipse，记一次成功的运行wordcount的注意事项

    hadoop要正确安装好 hadoop eclipse plugin要对应相应的eclipse版本 define hadoop location mr master:9000 另一个9001  下面的 ...