一个例子

　　

<%@ 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. openssl动态库编译

    通常Linux系统自带OpenSSL,但是其so文件由于没有debug信息,因此无法跟踪内部函数,对于学习 不太方便,需要通过源码重新安装.         我的Linux系统是CentOS7,自带的 ...

  2. create database 默认utf-8

    CREATE DATABASE IF NOT EXISTS dbname DEFAULT CHARSET utf8 COLLATE utf8_general_ci; 这是sql语句 CREATE TA ...

  3. 地图上显示X,Y 坐标代码

    事件数据 所有的鼠标事件都使用MouseButtonEventArgs和MouseEventArgs作为事件数据,通过这两个参数可以获取相关事件数据,使用GetPosition方法或者Source.H ...

  4. 关于追踪qemu 源码函数路径的一个方法

    这阵子一直在研究qemu 磁盘io路径的源码,发现直接看代码是意见非常低效率的事情,qemu是一个比较庞大的家伙(源码部分大概154MB,完全由C语言来完成),整个结构也都非常地复杂,所以从代码上研究 ...

  5. Python.h：No such file or directory

    出现No such file or directory的错误,有两种情况,一种是真的没有Python.h这个文件,一种是Python的版本不对, 可以进入/usr/include/文件夹下的Pytho ...

  6. JS 对java返回的json格式的数据处理

    var dataObj=eval("("+res+")"); alert(dataObj.billBuy) //res是如下的数据 {"billBuy ...

  7. Rails5终端基本命令

    更新: 2017/06/10 更新: 2017/06/21 增加迁移文件查看履历命令: rails db:migrate:status                           迁移文件生成 ...

  8. Excel学习 -- 数据透视表功能

    Excel -- 数据透视表基础 数据透视表(Pivot Table)是一种交互式的表,可以进行某些计算,如求和与计数等.所进行的计算与数据跟数据透视表中的排列有关.    之所以称为数据透视表,是因 ...

  9. bzoj 4078: [Wf2014]Metal Processing Plant【二分+2-SAT+枚举+并查集】

    枚举从大到小s1,二分s2(越大越有可能符合),2-SAT判断,ans取min 思路倒是挺简单的,就是二分的时候出了比较诡异的问题,只能二分s2的值,不能在数组上二分... 有个优化,就是当不是二分图 ...

  10. poj 1815 Friendship【最小割】

    网络流的题总是出各种奇怪的错啊--没写过邻接表版的dinic,然后bfs扫到t点不直接return 1就会TTTTTLE-- 题目中的操作是"去掉人",很容易想到拆点,套路一般是( ...