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 相关文章推荐
Javascript 复制数组实现代码
Nov 26 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
基于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
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Python跳出多重循环的方法示例
2019/07/03 Python
简单了解django缓存方式及配置
2019/07/19 Python
Python 复平面绘图实例
2019/11/21 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
一文读懂Python 枚举
2020/08/25 Python
python如何控制进程或者线程的个数
2020/10/16 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
别名指示符是什么
2012/10/08 面试题
留学推荐信中文范文三篇
2014/01/25 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
给医院的感谢信
2015/01/21 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
会议新闻稿
2015/07/17 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫