bootstrap 表单验证
前言:做Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator。今天就来看看它如何使用吧。
一、源码及API地址
介绍它之前,还是给出它的源码以及API的地址吧。
bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator
boostrapvalidator api:http://bv.doc.javake.cn/api/
二、代码以及效果展示
1、初级用法
来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js组件
<script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Content/bootstrap/js/bootstrap.min.js"></script><link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /><script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script><link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />
我们知道,既然是表单验证,那么我们在cshtml页面就必须要有一个Form,并且我们知道Form里面取元素都是通过name属性去取值的,所以,表单里面的元素都要有一个name的属性值。
<form><div class="form-group"><label>Username</label><input type="text" class="form-control" name="username" /></div><div class="form-group"><label>Email address</label><input type="text" class="form-control" name="email" /></div><div class="form-group"><button type="submit" name="submit" class="btn btn-primary">Submit</button></div></form>
有了表单元素之后,就是我们的js初始化了。
$(function () {$('form').bootstrapValidator({
message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},
fields: {username: {message: '用户名验证失败',validators: {notEmpty: {message: '用户名不能为空'}}},email: {validators: {notEmpty: {message: '邮箱地址不能为空'}}}}});});
内容应该很容易看懂。来看效果:
验证通不过,提交按钮灰掉不能点击
验证通过,提交按钮恢复
看看效果先感受下,最大优点:使用简单,界面友好。下面我们来看看重叠验证。
2、中级用法
上面我们知道了非空验证的写法,除此之外肯定还有其他验证方式啊。别急,我们慢慢来看。上面的代码cshtml部分不动,js部分我们稍作修改:
$(function () {$('form').bootstrapValidator({message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {username: {message: '用户名验证失败',validators: {notEmpty: {message: '用户名不能为空'},stringLength: {min: 6,max: 18,message: '用户名长度必须在6到18位之间'},regexp: {regexp: /^[a-zA-Z0-9_]+$/,message: '用户名只能包含大写、小写、数字和下划线'}}},email: {validators: {notEmpty: {message: '邮箱不能为空'},emailAddress: {message: '邮箱地址格式有误'}}}}});});
加上了重叠验证我们来看效果:
由上面的代码可以看出在validators属性对应一个Json对象,里面可以包含多个验证的类型:
notEmpty:非空验证;
stringLength:字符串长度验证;
regexp:正则表达式验证;
emailAddress:邮箱地址验证(都不用我们去写邮箱的正则了~~)
除此之外,在文档里面我们看到它总共有46个验证类型,我们抽几个常见的出来看看:
base64:64位编码验证;
between:验证输入值必须在某一个范围值以内,比如大于10小于100;
creditCard:身份证验证;
date:日期验证;
ip:IP地址验证;
numeric:数值验证;
phone:电话号码验证;
uri:url验证;
更多验证类型详见:http://bv.doc.javake.cn/validators/。当然涉及中文的验证可能会有些小问题,园友们如果有需要可以自行下去用代码测试下。
还有一个比较常用的就是submitHandler属性,它对应着提交按钮的事件方法。使用如下:
$(function () {$('form').bootstrapValidator({message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {username: {message: '用户名验证失败',validators: {notEmpty: {message: '用户名不能为空'},stringLength: {min: 6,max: 18,message: '用户名长度必须在6到18位之间'},regexp: {regexp: /^[a-zA-Z0-9_]+$/,message: '用户名只能包含大写、小写、数字和下划线'}}},email: {validators: {notEmpty: {message: '邮箱不能为空'},emailAddress: {message: '邮箱地址格式有误'}}}},submitHandler: function (validator, form, submitButton) {alert("submit");}});});
在它的Demo里面介绍了很多验证的实例。我们简单看看它的效果,至于实现代码,其实很简单,有兴趣的可以直接看api。
颜色验证
Tab页表单验证
按钮验证
bootstrap 表单验证相关推荐
- Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
- bootstrap表单验证
bootsrarp为表单验证提供了插件:BootstrapValidator,可以在官网和GitHub上查看 1.引入头文件: <script src="${pageContext.r ...
- 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- bootstrap from必填_bootstrap 表单验证使用方法
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- html表单判断字符数,JS判断字符串长度,结合element el-input el-form 表单验证(英文占1个字符,中文汉字占2个字符)...
首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...
- 分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您 下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
- php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
- bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...
- bootstrap 5 表单验证
bootstrap 5 表单验证 写在前面 Bootstrap 是一个功能强大.功能丰富的前端工具包.bootstrap 以其优秀的栅格系统,为网页创作带来的极大的方便.目前版本是5.2 .然而在表单 ...
最新文章
- 博客堂也遇DotText经典Exception
- 投资100亿美元,谷歌计划在2020年扩建美国办事处和数据中心
- 从书上截取一段TCP三次握手和四次挥手
- 分布式计算引擎MapReduce
- utf8 bom 去掉 java_utf-8-BOM删除bom
- Sybase函数大全
- python排序元组两个元素_在python中对具有3个元素的元组列表进行排...
- MATLAB_排列组合_组合生成程序
- JAVA的类名.this
- 美赛整理之遗传算法优化BP神经网络的齿轮故障诊断问题
- Markdown 数学公式语法
- 安装java正在使用中_如何安装java,安装JDK,JAVA SE正在使用中,安装不了
- 支付系统中人民银行支付系统(CNAPS)和中国银联下面的跨行支付系统是一回事儿吗?
- Android使用Zxing库生成PDF417扫描后多一个字符A
- 哪里看最新行业研报?
- 怎么对电脑的DNS进行设置从而使网速更快
- 14期 《心有猛虎 细嗅蔷薇》5月刊
- groovy_流利的Groovy
- 第八届“图灵杯”NEUQ-ACM程序设计竞赛个人赛题解
- java pdf 套打_itext生成发票套打(操作PDF)