一个例子

　　

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <jsp:include page="/views/common/JsAndCss.jsp"/>

    <title>form表单的校验</title>

</head>

<body>

    <div class="container">

        <div style="" class="content-center w-500 m-t40 h-600">

            <!-- class都是bootstrap定义好的样式，验证是根据input中的name值 -->

            <form id="defaultForm" class="form-horizontal">

                <div class="form-group">

                    <label class="control-label col-md-2">用户名</label>

                    <div class="col-md-10">

                        <input class="form-control" name="username" type="text" placeholder="请输入用户名">

                    </div>

                </div>

                <div class="form-group">

                    <label class="control-label col-md-2">密码</label>

                    <div class="col-md-10">

                        <input class="form-control" name="password" type="password" placeholder="请输入密码">

                    </div>

                </div>

                <div class="form-group">

                    <label class="control-label col-md-2">邮箱</label>

                    <div class="col-md-10">

                        <input class="form-control" name="email" type="text" placeholder="请输入邮箱">

                    </div>

                </div>

                <div class="form-group">

                    <input class="btn btn-success col-md-4 col-md-offset-4" name="submit" type="submit" value="提交">

                </div>

            </form>

        </div>

    </div>

    <script type="text/javascript">

        $(document).ready(function(){

            $("#defaultForm").bootstrapValidator({

                message:"不进行校验的值!",

                feedbackIcons:{//输入不同的状态,显示的图片的样式不同

                    valid: 'glyphicon glyphicon-ok',

                    invalid: 'glyphicon glyphicon-remove',

                    validating: 'glyphicon glyphicon-refresh'

                },

                fields:{//校验

                    username:{//键名username和name中的值对应

                        validators:{

                            notEmpty:{//非空校验

                                message:"用户名称不能为空"

                            },

                            stringLength:{//长度校验

                                min:6,

                                max:10,

                                message:"用户名长度在6-10位之间"

                            },

                            regexp:{//使用正则表达式

                                regexp:getReg().num,

                                message:"只能使用数字"

                            },

                            /*identical: {//相同

                                field: 'password', //需要进行比较的input name值

                                message: '两次密码不一致'

                            },

                            different: {//不能和用户名相同

                                field: 'username',//需要进行比较的input name值

                                message: '不能和用户名相同'

                            },*/

                        }

                    },

                    password:{

                        validators:{

                            notEmpty:{

                                message:"密码不能为空"

                            }

                        }

                    },

                    email:{

                        validators:{

                            notEmpty:{

                                message:"邮箱地址不能为空"

                            },

                            emailAddress:{//邮箱地址的校验

                                message:"邮箱格式不正确"

                            }

                        }

                    }

                }

            })

        })

    </script>

</body>

</html>

boostrapvalidator的更多相关文章

  1. 关于boostrapValidator动态添加字段（addField）验证的bug

    每次码博客,都觉得自己怀才不遇,哎~脑袋有瑕疵,文笔拿不粗手,就直接上干货吧. 在使用boostrapValidator这个验证插件的时候,如果某一个字段是动态添加来的,我们需要调用方法:addFie ...

  2. JS组件系列——Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  3. bootstrapValidator.js，最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  4. 黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  5. 双重保险——前端bootstrapValidator验证+后台MVC模型验证

    我们在前端使用BoostrapValidator插件验证最基本的格式要求问题,同时在后台中,使用MVC特有的模型验证来做双重保险.对于boostrapValidator我就不说了,具体请看<bo ...

  6. Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  7. BootstrapValidator：表单验证神器

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  8. Bootstrap之Form表单验证神器： BootstrapValidator（转）

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

随机推荐

  1. XMU 1611 刘备闯三国之卖草鞋 【贪心】

    1611: 刘备闯三国之卖草鞋 Time Limit: 1000 MS  Memory Limit: 64 MBSubmit: 90  Solved: 48[Submit][Status][Web B ...

  2. 超线程技术——超线程技术让（P4）处理器增加5%的裸晶面积，就可以换来15%~30%的效能提升，本质单核模拟双核！和异步编程的思想无异。

    超线程是Intel 所研发的一种技术,于2002年发布.超线程的英文是HT技术,全名为Hyper-Threading,中文又名超线程.超线程技术原先只应用于Intel Xeon处理器中,当时称为Sup ...

  3. sizeof注意

    1.sizeof用于获取非托管类型的大小(以字节为单位). 非托管类型包括下表列出的内置类型以及以下类型: 枚举类型 指针类型 用户定义的结构,不包含任何属于引用类型的字段或属性     struct ...

  4. UVa 12709 && UVaLive 6650 Falling Ants (水题)

    题意:给定 n 个长方体的长,宽,高,让你求高最大的时候体积最大是多少. 析:排序,用高和体积排序就好. 代码如下: #pragma comment(linker, "/STACK:1024 ...

  5. 【黑金教程笔记之008】【建模篇】【Lab 07 数码管电路驱动】—笔记

    实验七的目的是设计实现最大为99数字在2个数码管上.采用同步动态扫描.即行信号和列信号同步扫描.这里数码管是共阳极的.选择端口也是共阳极的. 模块: /************************ ...

  6. TS数据流PAT和PMT分析（转载）

    转自:http://www.cnblogs.com/hjj801006/p/3837435.html TS流,是基于packet的位流格式,每个packet是188个字节或者204个字 节(一般是18 ...

  7. 可视化工具Grafana部署

    随着业务的越发复杂,对软件系统的要求越来越高,这意味着我们需要随时掌控系统的运行情况.因此,对系统的实时监控以及可视化展示,就成了基础架构的必须能力. Grafana官方网站 https://graf ...

  8. bzoj 2257: [Jsoi2009]瓶子和燃料【裴蜀定理+gcd】

    裴蜀定理:若a,b是整数,且gcd(a,b)=d,那么对于任意的整数x,y,ax+by都一定是d的倍数,特别地,一定存在整数x,y,使ax+by=d成立. 所以最后能得到的最小燃料书就是gcd,所以直 ...

  9. 暑期训练狂刷系列——poj 3468 A Simple Problem with Integers （线段树+区间更新）

    题目连接: http://poj.org/problem?id=3468 题目大意: 给出n个数,有两种操作: 1:"C a b c",[a,b]中的每一个数都加上c. 2:&qu ...

  10. [ZPG TEST 111] 奶牛的新家【DP】

    3.奶牛的新家 [问题描述] 由于奶牛们纷纷表示破旧的房子实在是太丑陋了,DD决定给他们建造新家.现在有许多奶牛决定将家建造在n*m的城市中.然而奶牛们分成了k帮派,不同帮派的奶牛不能住在同列或同行上 ...