一个例子

　　

<%@ 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. 设计模式-（15）责任链模式 （swift版）

    一,概念: 责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计模式属于行 ...

  2. ubuntu12.04 64位系统配置jdk1.6和jdk-6u20-linux-i586.bin下载地址

    1:下载地址http://code.google.com/p/autosetup1/downloads/detail?name=jdk-6u20-linux-i586.bin&can=2&am ...

  3. 建立自己的私有docker（ssl&login auth）

    建立私有docker需要先建立ssl证书,然后建立htpass的登陆证书 最后使用nginx配置docker-compose.yml 参考: https://www.digitalocean.com/ ...

  4. [原创] [C#] 转换Excel数字列号为字母列号

    转换Excel数字列号为字母列号 例如: 0 -> A 26 -> AA private static string GetColumnChar(int col) { ; ; ) ) + ...

  5. HDU1260 Tickets —— DP

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1260 Tickets Time Limit: 2000/1000 MS (Java/Oth ...

  6. mac中的本地项目和登陆的钥匙串怎么解锁

    前提条件:电脑语言换成英语,然后按下面的操作就可以了. 1.打开launchapd中的钥匙串访问 2 选中第一栏登录, 点击左上角的锁锁上, 再点一次解锁. 3. 这回会弹出个东西 点击如上图中的重密 ...

  7. asp.net mvc5 使用百度ueditor 本编辑器完整示例（上）

    最近做一个项目,用到了百度ueditor富文本编辑器,功能强大,在线编辑文档,上传图片\视频.附件. MVC 模型的控制器准备: 1.建立模型. 在项目中Model 文件夹中建立 文章 模型,注意如果 ...

  8. 关于JAVA通过REST接口对arcGis Server数据进行增删改查

    一: 添加要素 public void create(BoxVo boxVo) throws Exception { // 创建HTTP客户端 CloseableHttpClient httpclie ...

  9. Ruby  String类

    String类 更新: 2017/06/10 更新: 2017/06/23 puts()要空格可以直接不加参数 更新: 2017/08/17 增加rails引入的titleize 更新: 2017/1 ...

  10. C# DateTime.Now 详解

    //2008年4月24日 System.DateTime.Now.ToString("D"); //2008-4-24 System.DateTime.Now.ToString(& ...