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-08-14 中文代码之Spring Boot实现简单REST服务

    最终目标详见: 参考MSDN,试搞.NET类库标识符的翻译版 · Issue #54 · program-in-chinese/overview 此文仅为技术探索+原型搭建的第一小步. 源码库: 演示 ...

  2. spring boot maven打包可运行jar包

    普通打包之后在程序目录运行,或者编写bat运行时会提示“没有主清单属性”,这是因为并没有找到main()方法,需要我们指明告诉java程序 我bat中的代码 @echo off title mytit ...

  3. JavaScript面向对象编程指南(五) 原型

    第5章 原型 5.1 原型属性 function f(a,b){ return a*b; }; // length 属性 f.length; // constructor 构造属性 f.constru ...

  4. Vue之resource请求数据

    导入resource文件 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js& ...

  5. Java相关问题整理

    1. OkHttpClient调用出现大量CLOSE_WAIT. 问题定位: 凡是系统中出现大量的CLOSE_WAIT,说明你的代码写的有问题,即:没有关闭连接. 在OkHttpClient中,默认时 ...

  6. Bullet3的一些理解

    Bullet3应该是第三大物理引擎了,拥有宽松的授权方式,开源.在我的项目中将采用它. 碰撞世界(btCollisionWorld)是最基本的环境类. 动态世界(btDynamicsWorld)从碰撞 ...

  7. HDU 1212 Big Number(C++ 大数取模)(java 大数类运用)

    Big Number 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1212 ——每天在线,欢迎留言谈论. 题目大意: 给你两个数 n1,n2.其中n1 ...

  8. 遍历结构体内部元素和值(Name and Value)

    代码: DataStruct.MessageStruct ms = new DataStruct.MessageStruct();//实例化结构体   //遍历结构体  foreach (System ...

  9. spring4笔记----报错publicid systemid之间要有空格的解决方法

    <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www. ...

  10. postgre中类似oracle的sql%rowcount用法

    get diagnostics cnt := row_count; 现在有两个表tab1和tab2,两个表的格式相同,tab1中有1000条数据,tab2中0条数据 创建测试功能函数 create o ...