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弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
jQuery实现查看图片功能
Dec 01 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
十大“创意”战术!
2020/03/04 星际争霸
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python实现简易云音乐播放器
2018/01/04 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
网络维护中文求职信
2014/01/03 职场文书
公司授权委托书
2014/04/04 职场文书
影子教师研修方案
2014/06/14 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
MySQL transaction事务安全示例讲解
2022/06/21 MySQL