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. 26.Odoo产品分析 (三) – 人力资源板块(6) – 工资表(2)

    查看Odoo产品分析系列--目录 接上一篇Odoo产品分析 (三) – 人力资源板块(6) – 工资表(1) 4. 缴纳登记册 在"缴纳登记册"菜单中可以查看所有的登记册并新建:  ...

  2. （python）面向对象

    一.面向对象概述 要了解面向对象,就需要先了解面向过程的概念,那么什么是面向过程编程呢?最具代表性的就是C语言了,所谓面向过程编程就是在做一件事的时候,需要按步骤进行,第一步干什么,第二步干什么,这种 ...

  3. Spark DataFrame的groupBy vs groupByKey

    在使用Spark SQL的过程中,经常会用到groupBy这个函数进行一些统计工作.但是会发现除了groupBy外,还有一个groupByKey(注意RDD也有一个groupByKey,而这里的gro ...

  4. katalon之web文件上传

    参考:https://docs.katalon.com/katalon-studio/docs/webui-upload-file.html#example- 适用范围:tag=input, type ...

  5. Java监控类库Metrics

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

  6. PHP下载网页

    <?php /*   author:whq   作用:获取网页的内容 */   include "../Snoopy/Snoopy.class.php";class Cute ...

  7. Python-爬虫03：urllib.request模块的使用

    目录 1. urllib.request的基本使用 1.1 urlopen 1.2. 用urlopen来获取网络源代码 1.3. urllib.request.Request的使用 2. User-A ...

  8. [福大软工] Z班 团队作业——随堂小测（同学录） 作业成绩

    团队作业--随堂小测(同学录) 作业链接 http://www.cnblogs.com/easteast/p/7763645.html 作业情况 本次作业从原先预计的3小时,有些组打了鸡血连续肝了4. ...

  9. python 协程、I/O模型

    一.引子 (超哥协程) 并发本质:保存状态+切换 cpu正在运行一个任务,转而执行另一个任务的情概况:1.是该任务发生了阻塞:2.该任务计算的时间过长或有一个优先级更高的程序替代了它. 协程本质上就是 ...

  10. 【汤鸿鑫 3D太极】5年目标规划（基本功、套路、实战搏击）

    [5年目标]在基本功的基础上,每年完成一个套路或实战搏击的学习研究. [中小学2年]三段九节 + 2套路. [高中的3年]太极十三势 + 1套路 + 推手 + 搏击. 1.中小学阶段-可自学 (1)基 ...