Bootstrap 表单验证formValidation 实现远程验证功能


Posted in Javascript onMay 17, 2017

最近项目用到了一个很强大的表单验证。记录下。官方地址:http://formvalidation.io/api/

还有一点很重要:这个插件的Bootstrap最好用他们自带的,有点改动。不用再去Bootstrap官网下载。

向上效果:

Bootstrap 表单验证formValidation 实现远程验证功能
Bootstrap 表单验证formValidation 实现远程验证功能
Bootstrap 表单验证formValidation 实现远程验证功能 

先导入资源:

<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" rel="external nofollow" />
  <link rel="stylesheet" href="dist/css/formValidation.css" rel="external nofollow" /
<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="dist/js/formValidation.js"></script>
  <script type="text/javascript" src="dist/js/framework/bootstrap.js"></script>
  <script type="text/javascript" src="dist/js/language/zh_CN.js"></script>

html:

<form id="defaultForm" class="form-horizontal">
  <div class="form-group">
    <label class="col-xs-3 control-label">Full name</label>
    <div class="col-xs-5">
      <input type="text" class="form-control" name="boxId" />
    </div>
  </div>
</form>

下面是验证代码;

$('#defaultForm').formValidation({
 message: '此值无效', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, locale: 'zh_CN', fields:{
    boxId:{
      verbose: false,//代表验证按顺序验证。验证成功才会下一个(验证成功才会发最后一个remote远程验证)
      validators: {
        notEmpty: {
          message: '这是必填字段'
        },
        digits: {
          message: '值不是数字'
        },
        stringLength: {
          min: 16,
          message:'必须为16个数字'
        },
        remote: {
           type: 'POST',
          url: '/box/unique',
          message: '此设备号已存在',
          delay: 2000
        }
      }
    },
        onSuccess:function(){
    //点击提交表单。表单所有都验证成功
       }
    });

后台返回

{ “valid”: true }//通过验证 
或 
{ “valid”: false }//不通过—》 ‘此设备号已存在',

效果图;

Bootstrap 表单验证formValidation 实现远程验证功能
Bootstrap 表单验证formValidation 实现远程验证功能
Bootstrap 表单验证formValidation 实现远程验证功能
Bootstrap 表单验证formValidation 实现远程验证功能

Bootstrap 表单验证formValidation 实现远程验证功能

Bootstrap 表单验证formValidation 实现远程验证功能

以上所述是小编给大家介绍的Bootstrap 表单验证formValidation 实现远程验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
深入浅析react native es6语法
Dec 09 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 #Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 #Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 #Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 #Javascript
vue之nextTick全面解析
May 17 #Javascript
Vue.js学习教程之列表渲染详解
May 17 #Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 #Javascript
You might like
一些星际专用术语解释
2020/03/04 星际争霸
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
跟老齐学Python之Import 模块
2014/10/13 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
对python的输出和输出格式详解
2018/12/08 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
资料员岗位职责
2013/11/17 职场文书
校园活动策划书范文
2014/01/10 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
教学质量月活动总结
2015/05/11 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
python如何读取.mtx文件
2021/04/22 Python
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python