一个例子

　　

<%@ 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. jdbc 操作步骤

    package org.db; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLExcept ...

  2. 7-39 Math对象

    7-39 Math对象 学习要点 掌握常用的数学计算方法 温馨提示:关于学习方法的建议 不要强求自己讲参考手册上所以的属性和方法都搞清楚,原因如下: 有些属性和方法非常生僻,很少用,甚至经过一段时间后 ...

  3. 利用js和CSS实现网页局部打印

    1 局部打印方法: 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题.使用方法:将要打印的内容通过 <span id="dayin"> ...

  4. vue 随笔 vue 的属性和方法

    新建的项目中main.js是项目的入口文件 npm run dev 运行文件 npm run bulid  编译 属性与方法 每个Vue实例都会代理其 data 对象里所有的属性: var data= ...

  5. 《Perceptual Losses for Real-Time Style Transfer and Super-Resolution》论文笔记

    参考 http://blog.csdn.net/u011534057/article/details/55052304 代码 https://github.com/yusuketomoto/chain ...

  6. Struts2自定义返回Json类型result

    本来Struts2有自己的json类型的返回结果,并提供了插件,但是它有一个问题,那就是它会将所有序列化的字段都返回,如果想要制定返回Action的某一个属性,则需要在配置result时,配置参数(这 ...

  7. 线上项目mysql、redis平滑迁移方案及步骤

    1.清晰系统内网及公网可达,CVM配置 2.迁移完整数据,项目部署,测试网络环境. redis:复制rdb文件mysql:xtrabackup备份3.确保项目正常运行,网络正常访问.项目对外接口及账户 ...

  8. ES6躬行记（23）——Promise的静态方法和应用

    一.静态方法 Promise有四个静态方法,分别是resolve().reject().all()和race(),本节将着重分析这几个方法的功能和特点. 1)Promise.resolve() 此方法 ...

  9. bzoj 2337 [HNOI2011]XOR和路径【高斯消元+dp】

    首先,我们发现,因为是无向图,所以相连的点之间是有"依赖性"的,所以不能直接用dp求解. 因为是xor,所以按位处理,于是列线性方程组,设$ x[i] $为点i到n异或和为1的期望 ...

  10. React 事件 传参

    绑定事件用 bind方法,第一个参数是 this,第二个参数是需要传入的值如下: <a onClick={this.updateLabel.bind(this,'参数1','参数2')} > ...