2016年10月7日

【转】基于jquery,bootstrap数据验证插件bootstrapValidator 教程

bootstrap:能够增加兼容性的强大框架.

因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说。

需要引用css:

bootstrap.min.css

bootstrapValidator.min.css

js:

jquery-1.10.2.min.js

bootstrap.min.js

bootstrapValidator.min.js

(下载实例)

以上这些都是必须的。

先上个简单的例子,只要导入相应的文件可以直接运行:

 View Code

这是最基本的,例子直接复制到本地,并且导入需要的css和js文件(JS中username,password等键值名和input标签中name属性值对应),运行就能够进行非空,长度验证,完全不需要管css样式。

效果图如下:

当然,以上都是插件写好的规则,如果想自己加匹配规则怎么办呢?

如下只要在input相对应的键值中加入一个regexp:{}键值对(在上面的js基础上修改)

复制代码
复制代码
username: {/*键名和input name值对应*/
                    message: 'The username is not valid',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '用户名不能为空'
                        },
                        regexp: {/* 只需加此键值对,包含正则表达式,和提示 */
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '只能是数字和字母_.'
                        },
                        stringLength: {/*长度提示*/
                            min: 6,
                            max: 30,
                            message: '用户名长度必须在6到30之间'
                        }/*最后一个没有逗号*/
                    }
                },
复制代码
复制代码

效果如下:

 

 至此只要运行和看了例子,就能进行大部分的验证了,是不是很简单?只要写相应的键值对即可,再也自己什么都写了。下面进一步的使用,进行用户的注册,

需求:

实时验证用户名是否存在,密码不能和用户名相同,两次密码需要相同,提交之后需要验证返回值

html代码(直接替换上例子中的form即可):

复制代码
复制代码
<form id="defaultForm" role="form" class="form-signin" action="registerAccount.do"
                method="post">
                <h2 class="form-signin-heading">请输入注册信息:</h2>

                <div class="form-group">
                    <label for="username">用户名:</label><input class="form-control"
                        type="text" name="username" id="username" />
                </div>
                <div class="form-group">
                    <label for="password">密码:</label><input class="form-control"
                        type="password" name="password" id="password"/>
                </div>
                <div class="form-group">
                    <label for="repassword">确认密码:</label><input class="form-control"
                        type="password" name="repassword" id="repassword" />
                </div>
                <div class="form-group">
                    <label for="phone">手机号码:</label><input class="form-control"
                        type="text" name="phone" id="phone" />
                </div>
                <div class="form-group">
                    <label for="email">email:</label><input class="form-control"
                        type="email" name="email" id="email" />
                </div>
                <div class="form-group">
                    <label for="invite">邀请码:</label><input class="form-control"
                        type="text" name="invite" id="invite">
                </div>
                <div class="form-group">
                        <button class="btn btn-lg btn-primary btn-block" type="submit">确认注册</button>
                        <a class="btn btn-lg btn-primary btn-block" href="../">返回首页</a>
                    </div>
            </form>
复制代码
复制代码

js代码(直接替换例子中的JS):

复制代码
复制代码
$(function(){/* 文档加载,执行一个函数*/
     $('#defaultForm')
     .bootstrapValidator({
         message: 'This value is not valid',
         feedbackIcons: {/*input状态样式图片*/
             valid: 'glyphicon glyphicon-ok',
             invalid: 'glyphicon glyphicon-remove',
             validating: 'glyphicon glyphicon-refresh'
         },
         fields: {/*验证:规则*/
             username: {//验证input项:验证规则
                 message: 'The username is not valid',
                
                 validators: {
                     notEmpty: {//非空验证:提示消息
                         message: '用户名不能为空'
                     },
                     stringLength: {
                         min: 6,
                         max: 30,
                         message: '用户名长度必须在6到30之间'
                     },
                     threshold :  6 , //有6字符以上才发送ajax请求,(input中输入一个字符,插件会向服务器发送一次,设置限制,6字符以上才开始)
                     remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值,获得一个json数据。例表示正确:{"valid",true}  
                         url: 'exist2.do',//验证地址
                         message: '用户已存在',//提示消息
                         delay :  2000,//每输入一个字符,就发ajax请求,服务器压力还是太大,设置2秒发送一次ajax(默认输入一个字符,提交一次,服务器压力太大)
                         type: 'POST'//请求方式
                         /**自定义提交数据,默认值提交当前input value
                          *  data: function(validator) {
                               return {
                                   password: $('[name="passwordNameAttributeInYourForm"]').val(),
                                   whatever: $('[name="whateverNameAttributeInYourForm"]').val()
                               };
                            }
                          */
                     },
                     regexp: {
                         regexp: /^[a-zA-Z0-9_\.]+$/,
                         message: '用户名由数字字母下划线和.组成'
                     }
                 }
             },
             password: {
                 message:'密码无效',
                 validators: {
                     notEmpty: {
                         message: '密码不能为空'
                     },
                     stringLength: {
                         min: 6,
                         max: 30,
                         message: '用户名长度必须在6到30之间'
                     },
                     identical: {//相同
                         field: 'password', //需要进行比较的input name值
                         message: '两次密码不一致'
                     },
                     different: {//不能和用户名相同
                         field: 'username',//需要进行比较的input name值
                         message: '不能和用户名相同'
                     },
                     regexp: {
                         regexp: /^[a-zA-Z0-9_\.]+$/,
                         message: 'The username can only consist of alphabetical, number, dot and underscore'
                     }
                 }
             },
             repassword: {
                 message: '密码无效',
                 validators: {
                     notEmpty: {
                         message: '用户名不能为空'
                     },
                     stringLength: {
                         min: 6,
                         max: 30,
                         message: '用户名长度必须在6到30之间'
                     },
                     identical: {//相同
                         field: 'password',
                         message: '两次密码不一致'
                     },
                     different: {//不能和用户名相同
                         field: 'username',
                         message: '不能和用户名相同'
                     },
                     regexp: {//匹配规则
                         regexp: /^[a-zA-Z0-9_\.]+$/,
                         message: 'The username can only consist of alphabetical, number, dot and underscore'
                     }
                 }
             },
             email: {
                 validators: {
                     notEmpty: {
                         message: '邮件不能为空'
                     },
                     emailAddress: {
                         message: '请输入正确的邮件地址如:123@qq.com'
                     }
                 }
             },
             phone: {
                 message: 'The phone is not valid',
                 validators: {
                     notEmpty: {
                         message: '手机号码不能为空'
                     },
                     stringLength: {
                         min: 11,
                         max: 11,
                         message: '请输入11位手机号码'
                     },
                     regexp: {
                         regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                         message: '请输入正确的手机号码'
                     }
                 }
             },
             invite: {
                 message: '邀请码',
                 validators: {
                     notEmpty: {
                         message: '邀请码不能为空'
                     },
                     stringLength: {
                         min: 8,
                         max: 8,
                         message: '请输入正确长度的邀请码'
                     },
                     regexp: {
                         regexp: /^[\w]{8}$/,
                         message: '请输入正确的邀请码(包含数字字母)'
                     }
                 }
             },
         }
     })
     .on('success.form.bv', function(e) {//点击提交之后
         // Prevent form submission
         e.preventDefault();

         // Get the form instance
         var $form = $(e.target);

         // Get the BootstrapValidator instance
         var bv = $form.data('bootstrapValidator');

         // Use Ajax to submit form data 提交至form标签中的action,result自定义
         $.post($form.attr('action'), $form.serialize(), function(result) {
//do something...
});
     });
});
复制代码
复制代码

效果图:

 

异常:

Uncaught RangeError: Maximum call stack size exceedede

没有加class="form-group"

posted @ 2016-10-07 19:18 lufangtao 阅读(324) 评论(0) 推荐(0) 编辑

[转]基于S2SH框架的项目—antlr-2.7.2.jar包冲突问题

摘要: java.lang.NoSuchMethodError: antlr.collections.AST.getLine()I org.hibernate.hql.ast.HqlSqlWalker.generatePositionalParameter(HqlSqlWalker.java:896) or 阅读全文

posted @ 2016-10-07 19:15 lufangtao 阅读(897) 评论(0) 推荐(0) 编辑

2015年1月26日

输入法那没有小键盘的图标解决方法

摘要: 如果是没了小键盘图标那就在任务栏输入法图标上点击鼠标右键——设置——添加——在键盘布局/输入法选项里选择中文(简体)-美式键盘——确定。就行了。 阅读全文

posted @ 2015-01-26 10:31 lufangtao 阅读(1112) 评论(0) 推荐(0) 编辑

2014年10月16日

Chrome百度不显示中文字体

摘要: chrome://flags/ 启用DirectWrite 关闭就可以了 阅读全文

posted @ 2014-10-16 15:42 lufangtao 阅读(292) 评论(0) 推荐(0) 编辑

2013年11月14日

转:数据库范式(1NF 2NF 3NF BCNF)

摘要: 数据库的设计范式是数据库设计所需要满足的规范,满足这些规范的数据库是简洁的、结构明晰的,同时,不会发生插入(insert)、删除(delete)和更新(update)操作异常。反之则是乱七八糟,不仅给数据库的编程人员制造麻烦,而且面目可憎,可能存储了大量不需要的冗余信息。范式说明1.1第一范式(1NF)无重复的列所谓第一范式(1NF)是指数据库表的每一列都是不可分割的基本数据项,同一列中不能有多个值,即实体中的某个属性不能有多个值或者不能有重复的属性。如果出现重复的属性,就可能需要定义一个新的实体,新的实体由重复的属性构成,新实体与原实体之间为一对多关系。在第一范式(1NF)中表的每一行只包含 阅读全文

posted @ 2013-11-14 15:06 lufangtao 阅读(1624) 评论(0) 推荐(0) 编辑

2013年10月18日

转:海明纠错码

摘要: 海明码(Hamming Code)是一个可以有多个校验位,具有检测并纠正一位错误代码的纠错码,所以它也仅用于信道特性比较好的环境中,如以太局域网中,因为如果信道特性不好的情况下,出现的错误通常不是一位。 海明码的检错、纠错基本思想是将有效信息按某种规律分成若干组,每组安排一个校验位进行奇偶性测试,然后产生多位检测信息,并从中得出具体的出错位置,最后通过对错误位取反(也是原来是1就变成0,原来是0就变成1)来将其纠正。 要采用海明码纠错,需要按以下步骤来进行:计算校验位数→确定校验码位置→确定校验码→实现校验和纠错。下面来具体介绍这几个步骤。本文先介绍除最后一个步骤的其它几个步骤。1.计算校.. 阅读全文

posted @ 2013-10-18 11:02 lufangtao 阅读(591) 评论(0) 推荐(0) 编辑

2013年9月24日

奇阶魔方阵

摘要: 对奇阶魔方阵,可用DoleRob算法生成,其过程为:从1开始,以此插入各自然数,直到N*N为止。选择插入位置原则为:a.第一个位置在第一行的正中;b.新位置应当处于最近一个插入位置右上方,但如右上方位置已超出方阵上边界,则新位置取应选列的最下一个位置;如超出右边界则新边界取应选行的最左一个位置;c.若最近一个插入元素为N的整数倍,则选下面一行同列的位置为新位置。实现代码如下:#include#include#define SIZE 100//魔法阵void Magic(){ int m[SIZE+1][SIZE+1]; int n; int value=1; int c... 阅读全文

posted @ 2013-09-24 16:30 lufangtao 阅读(800) 评论(0) 推荐(0) 编辑

2013年8月12日

字符串的模式匹配

摘要: 问题描述:如果子串T在主串中存在,则返回存在的位置,如果不存在,则返回-1。1.基本方法从主串的第pos位置字符开始和模式子串字符比较,如果相等,则继续逐个比较后续字符;否则从主串的下一个字符起再重新和模式子串的字符比较。直到找到匹配字符串或者是主串结尾。伪代码如下:Index(T,S,pos) i length[S] return i-lenght[S] else return -1;例如,主串T为:ababcabababab,子串为ababa,上述过程如下图所示。源代码如下:/*检测从主串T的pos位置开始,是否有和子串S匹配,如果有返回匹配开始位置,如果没... 阅读全文

posted @ 2013-08-12 14:32 lufangtao 阅读(20612) 评论(0) 推荐(0) 编辑

2013年8月1日

红黑树

摘要: 一、红黑树性质一棵二叉查找树如果满足下面的红黑性质,则为一棵红黑树:1) 每个结点或是红的,或是黑的。2) 根节点是黑的。3) 每个叶结点(NIL)是黑的。4) 如果一个结点是红的,则它的两个儿子都是黑的。5) 对于每个结点,从该结点到其子孙结点的所有路径上包含相同数目的黑结点。引理:一棵有n个内结点的红黑树的高度至多为2log2(n+1)。二、旋转 左旋以x到y之间的链为“支轴”进行。它使y成为该子树新的根,x成为y的左孩子,而y的左孩子成为x的右孩子。左旋的伪代码如下: 1 LEFT-ROTATE(T,x) 2 y <- right[x] ;Set y 3 ... 阅读全文

posted @ 2013-08-01 10:59 lufangtao 阅读(824) 评论(0) 推荐(0) 编辑

2013年7月10日

排序算法总结

摘要: 问题描述:输入:n个数。输出:输入序列的一个排序(即重新排序),使得a'1≤a'2≤...≤a'n。约定:数组A,下标从1开始首先列出用到的数据来源程序(随机产生1000个数)文件名:SortData.h#include#include#define RAND_NUM 10000int *randData;void getRandData(){ int i=0; randData=(int*)malloc(RAND_NUM*sizeof(int)); for ( i = 0; i #include#include#include"SortData.h" 阅读全文

posted @ 2013-07-10 20:54 lufangtao 阅读(1308) 评论(0) 推荐(0) 编辑

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示