黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
前言:做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组件
![](/assets/blank.gif)
<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" />
![](/assets/blank.gif)
我们知道,既然是表单验证,那么我们在cshtml页面就必须要有一个Form,并且我们知道Form里面取元素都是通过name属性去取值的,所以,表单里面的元素都要有一个name的属性值。
![](/assets/blank.gif)
<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>
![](/assets/blank.gif)
有了表单元素之后,就是我们的js初始化了。
![](/assets/blank.gif)
$(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: '邮箱地址不能为空'}}}}});});
![](/assets/blank.gif)
内容应该很容易看懂。来看效果:
验证通不过,提交按钮灰掉不能点击
验证通过,提交按钮恢复
看看效果先感受下,最大优点:使用简单,界面友好。下面我们来看看重叠验证。
2、中级用法
上面我们知道了非空验证的写法,除此之外肯定还有其他验证方式啊。别急,我们慢慢来看。上面的代码cshtml部分不动,js部分我们稍作修改:
![](/assets/blank.gif)
$(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: '邮箱地址格式有误'}}}}});});
![](/assets/blank.gif)
加上了重叠验证我们来看效果:
由上面的代码可以看出在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属性,它对应着提交按钮的事件方法。使用如下:
![](/assets/blank.gif)
$(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");}});});
![](/assets/blank.gif)
在它的Demo里面介绍了很多验证的实例。我们简单看看它的效果,至于实现代码,其实很简单,有兴趣的可以直接看api。
颜色验证
Tab页表单验证
按钮验证
转载:http://www.cnblogs.com/landeanfen/p/5035608.html
转载于:https://www.cnblogs.com/huangcong/p/5335376.html
黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)相关推荐
- Form表单验证神器: BootstrapValidator常见的坑,input框的value值改变二次验证不了?
BootstrapValidator表单验证是通常是用来设置form表单提交时,限制某些字段不能为空,为空时type="submit"的按钮一直提交不了,如下图 +++++++++ ...
- 整理的16个有用的jQuery Form(表单)验证教程
表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...
- 框架生成的HTML修改,Django框架form表单验证 修改html标签的样式
经过前面的学习,我们大致可以知道CharField.EmailField等等以Field结尾的方法,只能帮助我们对用户发来的信息做验证,不能生成html标签.字段本身自己虽然只做验证,但是我们可以通过 ...
- Django(part46)--form表单验证
学习笔记,仅供参考 文章目录 form表单验证 举个例子 form表单验证 form提供表单和字段验证,我们可以使用form.is_valid() 方法进行表单验证,若该方法返回值为True,则表示当 ...
- php form validator 下单,PHP Form表单验证:PHP form validator使_php
在php网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- ant-pro使用Form表单验证上传图片出现的问题
1.复现:用antd的Form表单验证上传图片必填项时出现问题:复现过程,先提交,提示图片需要上传,上传成功后,依旧提示:图片未上传 2.表单验证原理:先理解一下antd的Form表单验证的表层原理, ...
- django Form表单验证
这一部分涉及到三个地方:前端表单设计,表单验证的Form类编写,解析函数Views编写: 文章目录 前端表单 表单验证的Form类编写 后端view函数 前端表单 新建一个form_test.html ...
- Django之Form表单验证组件Tyrion
Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...
- vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
最新文章
- Linux文件权限符号含义
- Java--语言基础
- 互链网-未来世界的连接方式 (1)央行数字货币CBDC模型
- Markdown简介
- 一种极端思维引起的幻觉
- idea怎么给方法快速添加注释_生完孩子胸部下垂怎么办?来看快速矫正的方法
- oracle主机修改IP后客户端无法连接
- 编曲时如何在FL Studio卷帘窗口修改单个音符音量
- python中wx_python中wx模块的具体使用方法
- 占位符是如何防止sql注入的?
- 软件设计师历年真题(链接在文末)
- 手艺人舍bpftrace而取systemtap的代价和思考
- linux wget无法下载文件,wget下载文件
- Moq 和 RhinoMocks
- STM32MP157 三角函数运算花费时间比较
- 大话设计模式--计算器
- win7计算机用户配置文件存储路径,windows7系统电脑临时文件夹保存路径在哪
- 搭建自己的V Rising自建服务器,以及常见的V Rising服务器问题解决方案
- 基于树莓派的手势识别Oled屏幕显示
- 【每日一题】打卡 24