bootstrapvalidator

前言 最近很久没有写文章，不忙也忙的生活节奏，博客相关的东西也没法做成文章来详细讲，最多就是SEO相关，倒也没多少人会真正用到，所以过了一段时间，就目前开发完的学院实训系统web网页项目做个回顾，整个团队就我一个前端开发，所以我负责了需求分析、原型设计、UI/UE设计等工作。团队其他成员和老师都是负责java web后台。个人从用框架开发浅谈对框架开发的效率和效果的意义。 前端页面开发框架 常见web页面框架 web页面开发的框架，可能常用并且熟悉也就那几个. 页面布局框架： Bootstrap 、 Materialize JS框架： Jquery 一眼看过去似乎有点少哦，其实开发web网站只要需求不是特别多的，基本就够了，有些甚至JS都用的少。 开发中 前台页面开发最简单，因为需求的不多，其实如果复杂了，也就会多用到H5和CSS3的一些东西外加JS和Ajax。 框架浅谈 Bootstrap 这个框架确实厉害，我也不多介绍了。就跟它的宣传语一样。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。所有开发者、所有应用场景而设计。 Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 确实目前很多网页都用了这个框架，确实为开发省力不少

1 加载jQuery和bootstrap.min.js 后引入bootstrapValidator.min.js 字段验证之remote 远程验证(类似ajax验证)，返回值必须是 {"valid":true}{"valid":false} true表示 验证通过 false 表示验证不通过。 当添加remote 验证后，验证通过表单不能提交 submit 按钮里面多了一个 disabled="disabled" 按钮被禁用了，无法提交表单， 这个是因为提交按钮里面含有name或者其他元素如id, 导致表单增加验证项，验证不通过当然就不能提交了。所以果断去掉。 如下：<button type="submit" class="btn btn-danger">提交</button> 里面的name id 都不能有。 贴源码： <form class="form-horizontal" role="form" method="post" action="/Admin/ProductCate/doAdd" id="addForm"> <div class="form-group"> <label for="cate_name" class="col-lg-2 col-sm-2 control-label text-center">分类名</label> <div class="col-lg

bootstrapValidator常用验证规则总结 一 、bootstrapValidator引入 在使用bootstrapValidator前我们需要引入bootstrap和bootstrapValidator对应的js和css文件。 <link rel="stylesheet" href="css/bootstrap.min.css" />　　<link rel="stylesheet" href="bootstarp-validator/bootstrapValidator.css}"/> <!-- 1、Jquery组件引用 --> <script src="js/jquery-1.10.2.min.js" th:src="@{/js/jquery-1.10.2.min.js}"></script> <!-- 2、bootstrap组件引用 --> <script src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script> <!-- 3、引入bootstrapValidator的js --> <script type="text/javascript" th:src="@{js/bootstraptable/bootstrapValidator.js}"></script> 二、绑定验证的js代码

github:https://github.com/nghuuphuoc/bootstrapvalidator 参考博客： JS组件系列——Form表单验证神器： BootstrapValidator 参考博客： bootstrapvalidator之API学习 表单HTML，如下： 　　　　　　　　　　<form role="form" id="roleForm"> <div class="box-body"> <div class="form-group"> <input type="text" class="form-control" id="inputRoleName" name="roleName" placeholder="角色名称" /> </div> <div class="form-group"> <input type="text" class="form-control" id="inputRoleDescribe" name="roleDescribe" placeholder="角色描述" /> </div> <div class="form-group"> <select class="form-control select2" style="width: 100%;" id="selectRoleType"> </select> </div> <div

一、引入必要文件 下载地址：( https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip ) <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/path/to/dist/css/ 一、引入必要文件 下载地址：( https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip ) <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/> <script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script> <script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script> //

bootstrapValidator——一个很好用的表单验证插件，再也不用手写验证规则啦！ bootstrapValidator官方文档： http://bootstrapvalidator.votintsev.ru/api/ 一、举个丽子： 写了一个小例子 先来看一下效果吧！ 预览效果 查看源码 二、具体实现步骤如下： 1、下载jquery、bootstrap、bootstrapValidator bootstrapValidator下载地址： https://github.com/nghuuphuoc/bootstrapvalidator/commit/c023475236f66baab72975887a26e51d65df72f7 在这里下载后，解压bootstrapValidator-master，里面会有jquery、bootstrap、bootstrapValidator。其中bootstrap和jquery在vendor文件夹中，bootstrapValidator在src文件夹中。直接复制过来用就可以了，不用单独一个一个下载。在demo文件夹中有很多例子，可以直接拿过来用。 注意：如果bootstrap或jquery是单独下载的，可能会因为版本不一致，导致验证时，不会实时更新状态，最好使用下载后bootstrapValidator

有这样的一个场景，我们在提交form表单的时候 可能要做一些验证，比如判断是不是为空，电话的格式验证，邮箱的格式验证等等，手写起来也是可以得。 但是今天我介绍一个bootstrap插件简化开发。就是bootstrapValidator.js。 直接上手写代码。 1。首先 jquery，bootstrap 以及bootstrapValidator（地址 https://github.com/nghuuphuoc/bootstrapvalidator ） 2.引用jquery bootstrap bootstrapValidator(css ，js文件都需要引用) 3.代码 <form action="/Account/Register" method="post" id="registerForm"> @Html.AntiForgeryToken() <div style="margin:0 auto; width:400px;"> <div class="form-group"> <label> Email：</label> <input type="text" name="email" id="txtEmail" class="form-control" /> </div> <div class="form-group"> <label> 用户名：</label> <input

bootstrap-datepicker 与bootstrapValidator同时使用时，选择日期后，无法正常触发校验 (解决办法) http://blog.csdn.net/biedazhangshu/article/details/51657292 （博客网址） 问题描述： bootstrapValidator插件默认情况下，不会重复校验一个已经标记为验证通过或验证不通过的字段。so ，当开始触发校验后，没有通过校验，当正确选择日期后，并不会刷新校验结果，就会导致数据无法正常提交 问题解决： 根据应用场景分析，当日期选择插件关闭时，期望能够触发校验。所以使用bootstrap-datepicker的hide方法。当日期选择框关闭时，执行刷新校验。 代码如下： js: /* 加载时间选择插件 */ $("#f_workr_remind_date").datepicker({ todayBtn : "linked", autoclose : true, todayHighlight : true, endDate : new Date() }).on('hide',function(e) { //当日期选择框关闭时，执行刷新校验 $('#project_form').data('bootstrapValidator').updateStatus('f_workr_remind