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. centos6 自带python2.6升级python2.7+

    centos6系统自带Python为2.6.6版本,升级搞版本操作如下(python2-python3都一样) 1.下载需要升级的python包 官方下载地址:https://www.python.o ...

  2. iphone投屏电脑 苹果x用无线充电好不好

    众所周知,苹果新发布的iPhone 8和iPhone X支持无线充电功能,简单说就是在充电时用户只需把它们放到充电板上即可,不再需要插入Lightning线缆.而且如今iphone投屏电脑也是比较受欢 ...

  3. Linux CentOS7下安装Python3及其setuptools、pip

    CentOS 7系统自带Python2.7,我们尽量别去卸载它!!否则会出问题,比如yum无法使用等问题. 假若,在安装Python3时没有自动安装setuptools和pip,那么,如何在CentO ...

  4. Python textwrap模块(文本包装和填充)

    textwrap提供函数wrap().fill().indent().dedent()和以及TextWrapper类. 通常包装或者填充一两个字符串使用wrap()和fill().其他情况使用Text ...

  5. django CharField按整形排序

    #models.py from django.db import models class Block(models.Model): ... height = models.CharField(max ...

  6. C#-基本语法（三）

    关键词 关键字,是一些被C#规定了用途的重要单词 在Visual Studio的开发环境中,关键字被标识为蓝色 例如: using:导入命名空间 class:声明类 static:静态 void:无返 ...

  7. 洗礼灵魂，修炼python（81）--全栈项目实战篇（9）—— 购物商城登录验证系统

    都在线购物过吧?那么你应该体验过,当没有登录账户时,点开购物车,个人中心,收藏物品等的操作时,都会直接跳转到登录账户的界面,然后如果登录一次后就不用再登录,直到用户登出. 是的,本次项目就是做一个登录 ...

  8. python中封装、继承、多态

    又看到这个玩意,顺手写下来 面向对象三大特征: 封装:本质是将事物相关的属性和方法封装在一个类里面,我们调用类创建实例的时候,不用关心类内部的代码细节 继承:子类需要复用父类里面的属性或者方法,当然子 ...

  9. Java监控类库Metrics

    Gauge含义:瞬时值值类型:不限 Counter:作用:可以insr, decr 的计数器值类型:数字 Histogram:含义:maximum, mean, etc., it also measu ...

  10. python发展史

    一:Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum)(龟叔).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹 打发时间,决心开发一个新的脚本解释程序, ...