【转】基于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 submissione.preventDefault();// Get the form instancevar $form = $(e.target);// Get the BootstrapValidator instancevar 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"

转载于:https://www.cnblogs.com/lufangtao/p/5936514.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/283654.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三招从 20s 优化到 500ms

来源 | 苏三说技术 作者 | 苏三呀 前言 接口性能问题&#xff0c;对于从事后端开发的同学来说&#xff0c;是一个绕不开的话题。想要优化一个接口的性能&#xff0c;需要从多个方面着手。 本文将会围绕接口性能优化这个话题&#xff0c;从实战的角度出发&#xff0c;聊聊我是…

Linux学习之服务器搭建——DHCP服务器

通过前面基础网络配置已经将两台虚拟机连接起来了&#xff0c;在windows 下是将它和Centos设为统一网段&#xff0c;在DHCP里同样不变&#xff0c;改变的是将windows 所配置的静态IP全部换成“自动获取DHCP”而在接下来的操作&#xff0c;就是让我的windows 自动获取来自Linux …

WPF 动态切换黑|白皮肤

WPF 动态切换黑|白皮肤WPF 使用 WPFDevelopers.Minimal 如何动态切换黑|白皮肤作者&#xff1a;WPFDevelopersOrg原文链接&#xff1a; https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal框架使用大于等于.NET40&#xff1b;Visual Studio 2022;项目使用 MIT 开源…

中小企业虚拟化解决方案-VMware vSphere 6.5-日常管理入口v0.0.1

中小企业虚拟化解决方案-VMware vSphere 6.5日常管理入口v0.0.1本文目的&#xff1a;针对中小企业虚拟化的平台管理&#xff0c;涉及到很多管理入口&#xff0c;普通管理员未必知道从哪里管理?本文将从最底层到最高层进行简单的介绍&#xff0c;最终让普通管理员快速了解管理入…

Svn服务器的搭建与配置

本文由ilanniweb提供友情赞助&#xff0c;首发于烂泥行天下想要获得更多的文章&#xff0c;可以关注我的微信ilanniweb要把svn代码同步到git服务器上&#xff0c;本来是想通过subgit直接同步进行就行了。但是自已以前没有搭建过svn服务器&#xff0c;所以有了这篇文章。我们就来…

JAVA Future类详解

1. Future的应用场景 在并发编程中&#xff0c;我们经常用到非阻塞的模型&#xff0c;在之前的多线程的三种实现中&#xff0c;不管是继承thread类还是实现runnable接口&#xff0c;都无法保证获取到之前的执行结果。通过实现Callback接口&#xff0c;并用Future可以来接收多线…

最新 .NET 社区工具包, 推出MVVM 源代码生成器!

点击上方蓝字关注我们&#xff08;本文阅读时间&#xff1a;10分钟)我们很高兴地宣布正式推出新的 .NET 社区工具包&#xff0c;现在已经在NuGet上发布了8.0.0版本&#xff01;这是一个重要版本&#xff0c;包括大量新功能、改进、优化、错误修复&#xff0c;许多反映了全新项目…

【bzoj4145】[AMPPZ2014]The Prices 状压dp

原文地址&#xff1a;http://www.cnblogs.com/GXZlegend/p/6832200.html 题目描述 你要购买m种物品各一件&#xff0c;一共有n家商店&#xff0c;你到第i家商店的路费为d[i]&#xff0c;在第i家商店购买第j种物品的费用为c[i][j]&#xff0c;求最小总费用。输入 第一行包含两个…

java总结

1.org.hibernate.id.IdentifierGenerationException: ids for this class must be manually assigned before calling save(): com.supermap.model.meta.META_DS 保存或更新实体类的对象&#xff0c;需设置ID属性。否则会报上述错误。 setId(); 2.定义泛型方法 定义泛型方法时&…

Java并发编程:Executor、Executors、ExecutorService

Executors 在Java 5之后&#xff0c;并发编程引入了一堆新的启动、调度和管理线程的API。Executor框架便是Java 5中引入的&#xff0c;其内部使用了线程池机制&#xff0c;它在java.util.cocurrent 包下&#xff0c;通过该框架来控制线程的启动、执行和关闭&#xff0c;可以简化…

IOTCS+Ekuiper搭建物联网边缘计算平台

背景介绍IOTCS 是专为物联网平台而设计的工业智能网关。自从 2020 年 10 月以来&#xff0c;我们从需求调研&#xff0c;设计&#xff0c;定型&#xff0c;研发&#xff0c;测试经过漫长的沉淀与孵化&#xff0c;最终顺利实现工业智能网关最初的设想。我们凭借创新设计理念、快…

监听键盘弹出高度

- (void)registerForKeyboardNotifications {//使用NSNotificationCenter 鍵盤出現時[[NSNotificationCenter defaultCenter] addObserver:selfselector:selector(keyboardWillShown:)name:UIKeyboardWillChangeFrameNotification object:nil];//使用NSNotificationCenter 鍵盤…

[NOIP1999] 提高组 洛谷P1014 Cantor表

题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的。他是用下面这一张表来证明这一命题的&#xff1a; 1/1 1/2 1/3 1/4 1/5 … 2/1 2/2 2/3 2/4 … 3/1 3/2 3/3 … 4/1 4/2 … 5/1 … … 我们以Z字形给上表的每一项编号。第一项是1/1&#xff0c;然后是1/…

JMX 使用指南一 Java Management Extensions

1. 什么是 JMX JMX&#xff0c;全称 Java Management Extensions&#xff0c;是在 J2SE 5.0 版本中引入的一个功能。提供了一种在运行时动态管理资源的框架&#xff0c;主要用于企业应用程序中实现可配置或动态获取应用程序的状态。JMX 提供了一种简单、标准的监控和管理资源的…

WinForm(七)在新线程中更新UI

在WinForm项目中&#xff0c;很多时候会映遇上多线程一起工作的情况&#xff0c;因为当前UI的更新显示&#xff0c;是在主线程中&#xff0c;一但主线程被长时运算占据后&#xff0c;UI就会被卡信&#xff0c;出现假死现像。那么就需要起一个新线程做长时运算工作&#xff0c;把…

多种方法实现自适应布局

最近切了几个手机端的网页&#xff0c;第一次切的是美团的首页&#xff0c;为了自适应不同的手机分辨率&#xff0c;需要用到自适应布局&#xff0c;切图的时候是用的第一中方法&#xff0c;用到了定位&#xff0c;后来查找了一些其他方法&#xff0c;现在就介绍几种自适应布局…

hivesql优化的深入解析

转载&#xff1a;https://www.csdn.net/article/2015-01-13/2823530 一个Hive查询生成多个Map Reduce Job&#xff0c;一个Map Reduce Job又有Map&#xff0c;Reduce&#xff0c;Spill&#xff0c;Shuffle&#xff0c;Sort等多个阶段&#xff0c;所以针对Hive查询的优化可以大致…

如何用一行 CSS 实现 10 种现代布局

现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局&#xff0c;它们实现了一些非凡的工作。 01. 超级居中&#xff1a;place-items: center 对于第一个“单行”布局&#xff0c;让我们解决所有 …

谈谈我对MVC的View层实现的理解

谈谈我对MVC的View层实现的理解 MVC框架可以把应用清晰明了地分为三个部分&#xff1a;Model层–数据层&#xff0c;View层–视图层&#xff0c;Controller–逻辑层&#xff0c;Model层负责整合数据&#xff0c;View层负责页面渲染&#xff0c;Controller层负责实现业务逻辑。 …

在.NET 6.0中使用不同的托管模型

本章是《定制ASP NET 6.0框架系列文章》的第六篇。在本章中&#xff0c;我们将讨论如何在ASP NET 6.0中自定义托管宿主。比如&#xff0c;托管选项和不同类型的托管&#xff0c;并了解一下IIS上的托管。限于篇幅&#xff0c;本章只是一个抛砖迎玉。本章涵盖主题包括&#xff1a…