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. 2018-10-17 Chrome插件实现GitHub代码翻译v0.0.3

    续前文浏览器插件实现GitHub代码翻译原型演示, 通过调用浏览器插件-离线英汉词典的批量查词接口, 实现了源码的初步命名直译. 源码库仍在: program-in-chinese/webextens ...

  2. DOCTYPE声明作用？标准模式与兼容模式？

    <!DOCTYPE>文档声明是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明,用以告诉其他人这个文档的类型风格:DTD(文档类型定义)是一组机器可读的规则,它们指示(X) ...

  3. java方法中，传参是传值还是传址问题（对比C语言、C#和C++）

    问题引出: 编写一个简单的交换值的小程序,如果我们只是简单地定义一个交换函数接收两个数,在函数内部定义一个中间变量完成交换.那么当我们把a,b两个实参传给这个函数时,往往得不到预期的结果.这是为什么呢 ...

  4. Ubuntu-Tweak 安装

    Ubuntu Tweak 是中国人开发的一款专门为Ubuntu准备的配置.调整工具,类似与compiz,界面更友好.   下面是安装命令:   第一步:添加tweak源 sudo add-apt-re ...

  5. 你不可不知的Java引用类型之——WeakReference源码详解

    定义 WeakReference是弱引用,该引用不会影响垃圾回收器对对象的回收,不会影响对象的生命周期. 说明 当虚拟机在某个时间点决定要回收一个弱可达(weakly-reachable)对象时,会自 ...

  6. Nosql数据库分类

    一.KV存储 包括:Redis,Memcached 特点:使用key快速查到其value,Memcached支持string类型的value,Redis除string类型外还支持set,hash,so ...

  7. android 休眠唤醒机制分析(一) — wake_lock【转】

    Android的休眠唤醒主要基于wake_lock机制,只要系统中存在任一有效的wake_lock,系统就不能进入深度休眠,但可以进行设备的浅度休眠操作.wake_lock一般在关闭lcd.tp但系统 ...

  8. iOS 指纹解锁 验证TouchID

    iOS指纹解锁 1.首先,引入依赖框架 LocalAuthentication.framework #import <LocalAuthentication/LocalAuthenticatio ...

  9. 如何用Ant Design Pro框架做项目省力

    1.熟悉React所有语法,以及redux.redux-saga.dva.一类的库的能力 2.灵活运用该框架提供的基础UI组件,想方设法利用现有的UI组件进行组合,尽可能减少工作量

  10. D. Diverse Garland Codeforces Round #535 (Div. 3) 暴力枚举+贪心

    D. Diverse Garland time limit per test 1 second memory limit per test 256 megabytes input standard i ...