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 相关文章推荐
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
javascript头像上传代码实例
Sep 28 Javascript
简述Vue中容易被忽视的知识点
Dec 09 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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
python基础教程之常用运算符
2014/08/29 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python同步windows和linux文件
2019/08/29 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
使用python绘制二维图形示例
2019/11/22 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
Django中使用Celery的方法步骤
2020/12/07 Python
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
中职生自荐信
2013/10/13 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
出国留学计划书
2014/04/27 职场文书
安全宣传标语
2014/06/10 职场文书
幼儿园标语大全
2014/06/19 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
详细了解MVC+proxy
2021/07/09 Java/Android