一个例子

　　

<%@ 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. html页面缓存问题

    若IIS没有设置,html页面一旦缓存,则永远缓存. Chrome如下 火狐如下 一种方法:我们一般通过xxx.html?20151010这样URL欺骗浏览器. 另一种方法:设置IIS,让永远客户端不 ...

  2. java 泛型的理解与应用

    为什么使用泛型? 举个例子: public class GenericTest { public static void main(String[] args) { List list = new A ...

  3. bzoj 2744 朋友圈

    题目大意: 两个国家 各有A和B个人,每个人有一个数值. 若两个A国的人满足$val_i\space xor \space val_j \mod 2 =1$ 则他们为朋友 若两个B国的人满足$val_ ...

  4. excel+requests管理测试用例接口自动化框架

    背景: 某项目有多个接口,之前使用的unittest框架来管理测试用例,将每个接口的用例封装成一个py文件,接口有数据或者字段变动后,需要去每个py文件中找出变动的接口测试用例,维护起来不方便,为了便 ...

  5. 【411】COMP9024 Assignment1 问题汇总

    1. 构建 Makefile 文件后运行错误,undefined reference to 'sqrt' 实际上是没有链接math数学库,所以要 $gcc test.c –lm //-lm就是链接到m ...

  6. webpack 4.0 相关

    Webpack 4.0发布了!! https://www.jianshu.com/p/3a13f1b37300 webpack详解 https://juejin.im/post/5aa3d2056fb ...

  7. MySQL 一对多查询，合并多的一方的信息

    select   c.name,  (select   group_concat(name) from student   s   where  s.class_id =c.id ) from  cl ...

  8. [BZOJ1381]Knights

    Description 在一个N*N的棋盘上,有些小方格不能放骑士,棋盘上有若干骑士,任一个骑士不在其它骑士的攻击范围内,请输出最多可以放多少个骑士. 骑士攻击的点如中国象棋中的马,可以攻击8个点. ...

  9. git介绍及安装

    git介绍 git是一个开源的分布式版本控制系统,用于敏捷高效的处理任何或大或小的项目.git是linus Torvalds为了帮助管理Linux内核开发的一个开放源码的版本控制软件. Git 与常用 ...

  10. synchronized(4)修饰语句块之：synchronized(this)

    synchronized(this) 此时,线程获得的是对象锁.例如: public class Thread8 extends Thread { public void sync_fun() { s ...